Jiansen Lu's Computing Blog: January 2012

Friday, January 27, 2012

CSS: horizontal menu

The following code to create CSS horizontal menu:

<head>

</head>

<body>

</body>

"padding:0;margin:0; list-style-type:none;" is to remove bullets.
"float:left;" is to align the menu items up against each other in horizontal line.
The result can be seen in the menu of:
http://www3.telus.net/jianlu58/

Thursday, January 26, 2012

Create a flash puzzle game

Create a flash calculator

Result of my flash calculator.

Design idea in ActionScript 3.0:
1) Create a background image Movie Clip bg (no buttons and operators) and linkage to class bg:

//create background instance

var calcbg:bg=new bg();

//Define background x coordinate

//calcbg.x=0;

//Define background y coordinate

calcbg.y=0;

//Define background transparency

calcbg.alpha=0.9;

// Show background on stage

addChild (calcbg);

2) Create a display output box Movie Clip resultbg and linkage to class resultbg:

//create output box instance

var rbg:resultbg=new resultbg();

//Define output box x coordinate (cm):

//rbg.x=20;

//Define output box y coordinate

rbg.y=40;

//Define the width of output box

rbg.width = 200;

//Define the height of the output box

rbg.height = 20;

// Show output box on stage

addChild (rbg);

3) Add Button and Label from component to library.

//Import Button and Label class from library

import fl.controls.Button;

import fl.controls.Label;

// Create "+" Button

var ADD:Button = new Button();

//Create "-" Button

var MINUS:Button = new Button();

//Create "X" Button

var MULTIPLY:Button = new Button();

//Create "/" Button

var DIVIDE:Button = new Button();

//Create "=" Button

var EQUAL:Button = new Button();

//Create "clear" Button

var CLS:Button = new Button();

//Add lable "+" on ADD button

ADD.label = "+";

// When mouse click Add button, operatorClick function is called

ADD.addEventListener (MouseEvent.CLICK, operatorClick);

//Show ADD button on stage

addChild (ADD);

//Define

ADD.x = 145;

ADD.y = 70;

ADD.width = 30;

ADD.height =30;

//The same process is applied to other buttons

var operator:String = "";

//Check if the input is a new number

var numnew:Boolean = true;

//Create "=" Button

EQUAL.label = "=";

//Call equalClick when "+" button is clicked

EQUAL.addEventListener (MouseEvent.CLICK, equalClick);

addChild (EQUAL);

//Action when clicking operator button

function operatorClick (e:MouseEvent) {

EQUAL.dispatchEvent (new MouseEvent(MouseEvent.CLICK));

// Once dispatched, the target property of the event object is set to the object on which //dispatchEvent() was called Used for e.target

operator = Button(e.target).label;

numnew = true;

}

4. Operator and results

//Output result

var resultField:TextField = new TextField();

//When click "=" button

for (var i = 0; i<=9; i++) {
    numbutt[i] = new Button();
    numbutt[i].label = i;
    numbutt[i].addEventListener (MouseEvent.CLICK,numClick);
    addChild (numbutt[i]);
}

// distribut them in different positions

    for (var i:int = 0; i<=9; i++) {
        numbutt[i].width = 30;
        numbutt[i].height = 30;
        if (i>0) {
            numbutt[i].x=5+40*((i-1)%3)+20;
            numbutt[i].y=30+40*int((i-1)/3)+40;
        } else {
            numbutt[i].x=5+calcx;
            numbutt[i].y=150+calcy;
        }

//Add them on stage

for (var i = 0; i<=9; i++) {
    numbutt[i] = new Button();
    numbutt[i].label = i;
    numbutt[i].addEventListener (MouseEvent.CLICK,numClick);
    addChild (numbutt[i]);
}

//When the number button is click

Wednesday, January 25, 2012

Open avi file using VLC media player

When I opened avi file using Windows Media Player, I can only hear the sound but no video. I changed to use VLC media player and I am able watch videos.

VLC is a free and open source cross-platform multimedia player and framework that plays most multimedia files as well as DVD, Audio CD, VCD, and various streaming protocols. The input formats can be:
MPEG (ES,PS,TS,PVA,MP3), AVI, ASF / WMV / WMA, MP4 / MOV / 3GP, OGG / OGM / Annodex, Matroska (MKV), Real, WAV (including DTS), Raw Audio: DTS, AAC, AC3/A52,Raw DV,FLAC,FLV (Flash), MXF, Nut, Standard MIDI / SMF and Creative™ Voice.

VLC media player can be downloaded from:
http://www.videolan.org/

Tuesday, January 24, 2012

7-zip, a free software to open rar file format

7-Zip is open source software, a file archiver with a high compression ratio. It can be downloaded from:
http://www.7-zip.org/

7-Zip Supported formats:

Packing / unpacking: 7z, XZ, BZIP2, GZIP, TAR, ZIP and WIM
Unpacking only: ARJ, CAB, CHM, CPIO, CramFS, DEB, DMG, FAT, HFS, ISO, LZH, LZMA, MBR, MSI, NSIS, NTFS, RAR, RPM, SquashFS, UDF, VHD, WIM, XAR and Z.

Monday, January 23, 2012

Add translation in your website

Add the following Google code to your website, you can instant access to automatic translation of the pages.

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Below is the example:

Thank you for your visiting my website. Happy Chinese new year!
Reference:
http://translate.google.com/translate_tools
You can easily add the translation tool to your blogger by following the instruction.

Friday, January 20, 2012

Passing PHP array to JavaScript array

Below is the example passing PHP array qid[] and qtype[] array to Javascript array
question_num0[] and question_type[].

$count =10;
for($j=0; $j<$count; $j++){
echo "question_num0[$j]=$qid[$j];\n";
echo "question_type[$j]=\"$qtype[$j]\";\n";
}
?>

//Write your JavaScript here using array question_num0 and question_type

//--><!]]>
</script>

Thursday, January 19, 2012

Passing variables from PHP to JavaScript

There is a bug in the following code when passing variables from PHP to Javascript:

alert(question_type);

//--><!]]>
</script>

When running this code, no alert box is shown. In FireFox, selecting web developer then choose Error Console in the top menu, the error is "bbb1 is not defined."
The above code is equivalent to
var question_type= bbb1;
The correct syntax should be:

var question_type= "bbb1";

(The problem is due to string, number is OK)
The final correct code should be:

alert(question_type);

//--><!]]>
</script>

onsubmit in Form Validation

Javascript can be used for form validation. For example:
<form name="testForm" action="testForm.php" onsubmit="return validateForm()" method="post">
In this case, after running Javascript validateForm(), if return true, the action testForm.php is executed when the form is submitted. If return flase, the form will not be submitted.
If we don't have return in onsubmit:
<form name="testForm" action="testForm.php" onsubmit=" validateForm()" method="post">
then the form will be submitted no matter what the validateForm() return.

Code:
<script type="text/javascript">
function validateForm()
{
var x=document.forms["testForm"]["luckynumber"].value;
if (isNaN(x))
{
alert("Your input is not a number");
return false;
}
}
</script>
</head>

<body>
<form name="testForm" action="testForm.php" onsubmit="return validateForm()" method="post">
Enter your lucky number: <input type="text" name="luckynumber">
<input type="submit" value="Submit">
</form>
</body>

Wednesday, January 18, 2012

Create a free forum and add your adsense

You may want to create a forum and have your adsense inside.
Yes, you can create a free forum via
http://www.yuku.com/
yuku has his own ads. But you can add your ads too.
Go to custom header section of your Customized Skins page under edit html and edit global html
copy the following code

<adsense>
google_ad_client = "pub-XXXXXXXX";
google_ad_slot = "4962036764";
google_ad_width = 728;
google_ad_height = 90;
</adsense>

where pub-XXXXXXXX is your adsense number.
Then your adsense will be shown in the header
My forum at yuku.com:
http://jiansen.yuku.com/

Javascript: Only submit answers if one of the checkboxes is checked

An alert box is shown if no check box was checked when submitting an answer. The idea is that at least one check box should be checked in each question. Below is the code:

<form method="post" action="take_test.php" name="test_question" onsubmit="return checkForBlanks();">
Are you? <br />
<input type="radio" name="age" value="old" />Old<br />
<input type="radio" name="age" value="middle" />Middle Age<br />
<input type="radio" name="age" value="young" /> Young
</form>
var the_question = document.forms['test_question'].elements['age'];
function checkForBlanks(){
        var blank_entry = true;
        for(var i=0; i<the_question.length; i++){

                         if(the_question[i].checked){

                            blank_entry = false;

                             break;

                          }

            }
        if(blank_entry){

          alert("You do not answer this question. Please answer it.");

                 return false;
   }
        else{
      return true;
}

}

Tuesday, January 17, 2012

Add this blog to yousaytoo.com

Add this blog to
http://www.yousaytoo.com
to increase traffic.

Monday, January 16, 2012

TortoiseSVN for version control in software programming

TortoiseSVN a free open-source Windows client for the Apache™ Subversion® version control system. TortoiseSVN can be downloaded from:
http://tortoisesvn.net/downloads.html

TortoiseSVN is integrated into the Windows explorer. To use TortoiseSVN, you need to open the Window explorer and right-click any folder to bring up the command menu. Example to use TortoiseSVN:
1) create a new folder C:\svn_repos
2) Now right click on the new folder and from the context menu choose TortoiseSVN → Create Repository here. Then click Create folder structure. A list of files and folders are created.
3) Now I want to import my project folder C:\Users\jiansen\Desktop\CAS\jiansen_dir\www_CESEI into file repository
Right-click C:\Users\jiansen\Desktop\CAS\jiansen_dir\www_CESEI
select TortoiseSVN->Import,
(Note: I did not see Import in my old folder www,
I created a new folder www_CESEI then I can not see TortoiseSVN->Import)
Under URL of repository, enter:
file:///c:/svn_repos/trunk/www_cesei
check Enable Auto-properties.
4) Create a new working directory for a day-to-day working directory:
C:\Users\jiansen\Desktop\www_CESEI_dev
Right click this folder, click SVN Checkout,
Enter the following URL to checkout:
file:///c:/svn_repos/trunk/www_cesei
5) Editing a file fms_connection.php in working directory:
C:\Users\jiansen\Desktop\www_CESEI_dev
Right click the file and select TortoiseSVN->diff and
TortoiseSVN's file compare tool starts, showing you exactly which lines have changed.
6) After you are happy with the change, right click the file and select SVN Committee.

Tuesday, January 10, 2012

Two versions of PHP if statement

There are two versions of PHP if statement when combining PHP and HTML block.
Version 1:

<?php if(<your evaluation here>) { ?>

// HTML code

<?php } else { ?>

// HTML code

<?php }; ?>

Version 2

<?php if(<your evaluation here>): ?>

// HTML code

<?php else: ?>

// code

<?php endif; ?>

Same on “for” and “while” loops as well as “elseif”.

Monday, January 9, 2012

gunzip files .tar.gz in Windows

Go to
http://www.sfsu.edu/ftp/win/utils/
Dowload powarc61.exe
Run powarc61.exe to install PowerArchiver.
Run PowerArchiver to gunzip your .tar.gz in Windows 7.

Atutor supports SCORM 1.2 but not for SCORM 2004

ATutor (http://atutor.ca) is an Open Source Web-based Learning Management System (LMS). Sharable Content Object Reference Model (SCORM) is a collection of standards and specifications for web-based e-learning. SCORM governs how online learning content and Learning Management Systems (LMSs) communicate with each other, and e-learning interoperability.

From http://atutor.ca/atutor/, we can see ATUTOR support SCORM content packaging and SCORM 1.2 LMS RTE3 (Runtime Environment) for playing and managing SCORM based Sharable Content Objects (SCOs). ATUTOR allows content developers to create reusable content that can be swapped between different e-learning systems. Content created in other IMS or SCORM comformant systems can be imported into ATutor, and visa versa.

But ATUTOR does not support SCORM 2004. Greg (atutor forum support) stated:
"Our efforts have been on implementing IMS Common Cartridge, a more flexible interoperability standard than SCORM. Implementing SCORM 2004(3) would be a fairly significant undertaking. It might be something we take on if more demand arises, and funds to support the work become available. "

Jiansen Lu's Computing Blog

Pages

Adsense

Popular Posts

Friday, January 27, 2012

CSS: horizontal menu

Thursday, January 26, 2012

Create a flash puzzle game

Create a flash calculator

Wednesday, January 25, 2012

Open avi file using VLC media player

Tuesday, January 24, 2012

7-zip, a free software to open rar file format

Monday, January 23, 2012

Add translation in your website

Friday, January 20, 2012

Passing PHP array to JavaScript array

Thursday, January 19, 2012

Passing variables from PHP to JavaScript

onsubmit in Form Validation

Wednesday, January 18, 2012

Create a free forum and add your adsense

Javascript: Only submit answers if one of the checkboxes is checked

Tuesday, January 17, 2012

Add this blog to yousaytoo.com

Monday, January 16, 2012

TortoiseSVN for version control in software programming

Tuesday, January 10, 2012

Two versions of PHP if statement

Monday, January 9, 2012

gunzip files .tar.gz in Windows

Atutor supports SCORM 1.2 but not for SCORM 2004