Friday, January 27, 2012

CSS: horizontal menu

The following code to create CSS horizontal menu:
 <style type="text/css">
padding:0.2em 0.6em;
border-right:1px solid white;
a:hover {background-color:#ff3300;}
li {display:inline;}
<ul class="ul">
<li><a class="a" href="index.html">Home</a></li>
<li><a class="a" href="page1.html">Page 1</a></li>
<li><a class="a"  href="page2.html">Page 2</a></li>
<li><a class="a" href="page3.html">Page 3</a></li>
"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:

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
//Define background y coordinate
//Define background transparency
// 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):
//Define output box y coordinate
//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);
 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
    operator = Button(;
    numnew = true;
4. Operator and results
//Output result
var resultField:TextField = new TextField();
//When click "=" button
function equalClick (e:MouseEvent) {
    if ("" == operator) {
        num1 = Number(resultField.text);
    } else if ("+" == operator) {
        num2 = Number(resultField.text);
        num1 += num2;
    } else if ("-" == operator) {
        num2 = Number(resultField.text);
        num1 -= num2;
    } else if ("×" == operator) {
        num2 = Number(resultField.text);
        num1 *= num2;
    } else if ("÷" == operator) {
        num2 = Number(resultField.text);
        num1 /= num2;
    resultField.text = String(num1);
    numnew = true;
    operator = "";
 5. Create nine buttons for 1 to 9 digits
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) {
        } else {
//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
function numClick (e:MouseEvent) {
    if (numnew) {
        resultField.text ="";
    if (resultField.length<29) {
        resultField.appendText (Button(;

    } else {
        resultField.appendText ("");
    numnew = false;


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:

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:

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="//"></script>
Below is the example:

Thank you for your visiting my website. Happy Chinese new year!
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[].

<script type="text/javascript">

var question_type = new Array();
var  question_num0= new Array();

$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

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:
 <script type="text/javascript">
var question_type = <?php echo("bbb1"); ?>;
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:
<script type="text/javascript">
var question_type = "<?php echo("bbb1"); ?>";

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.

<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;

<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">

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
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
google_ad_client = "pub-XXXXXXXX";
google_ad_slot = "4962036764";
google_ad_width = 728;
google_ad_height = 90;
where pub-XXXXXXXX is your adsense number.
Then your adsense will be shown in the header
My forum at

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
var the_question  = document.forms['test_question'].elements['age'];
function checkForBlanks(){
        var blank_entry = true;
        for(var i=0; i<the_question.length; i++){
                            blank_entry = false;
              alert("You do not  answer  this question. Please answer it.");
                 return false;
              return true;


Tuesday, January 17, 2012

Add this blog to

Add this blog to
to increase traffic.

YouSayToo Revenue Sharing Community

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:

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:
check Enable Auto-properties.
4) Create a new working directory for a day-to-day working directory:
Right click this folder, click SVN Checkout,
Enter the following URL to checkout:
5) Editing a file fms_connection.php in working directory:
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
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 ( 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, 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. "