G9 Activities

WELLS-KCB G9 ICT ACTIVITIES

General Instruction: Choose a partner: Wells G9 with KCB G9. There are two activities you need to accomplish: First is “A Google A Day“, then one tutorial from the list below. You can work by partner or do individually; but be sure to sit beside your partner so you can always extend help whenever possible.

ACTIVITY 1: A GOOGLE A DAY (agoogleaday.com). Try the full 9+1 Bonus questions on the googleaday.com test. Teams will compete to try and post the highest score in the class.

http://www.agoogleaday.com


ACTIVITY 2: WEB TUTORIALS. Just choose one from the list below.

OPTION A: TEXT EFFECTS. Visit the links below and choose a tutorial that you can finish on time. Make sure to use your name(s) in your artwork.

http://textuts.com/oz-the-great-and-powerful-inspired-text-effect/
http://www.photoshopcafe.com/tutorials/liquid-type/liquid-type.htm
http://psd.tutsplus.com/tutorials/text-effects-tutorials/glass-text-effect/
http://psd.tutsplus.com/tutorials/tutorials-effects/advanced-glow-effects/


OPTION B: IMAGE MANIPULATION. Visit these websites and choose a tutorial that you can finish on time. Publish your masterpiece in your blog.

http://10steps.sg/tutorials/photoshop/photoshop-animal-hybrids-tutorial/
http://10steps.sg/tutorials/photoshop/make-yourself-an-amazing-typographic-portrait/
http://10steps.sg/tutorials/photoshop/tutorial-on-retro-comic-book-effect-in-photoshop/
http://design.creativefan.com/create-an-amazing-abstract-heart-surreal-photoshop-tutorial/


OPTION C: DESIGN IMAGE QUOTATIONS. Get your favorite quotations from the Internet and design an image quotation for each. Don’t forget to include your name (or blog address) somewhere in your work. You may create as many image quotations as you want. You can share your artwork in your social networking sites later on. Visit this site for inspiration.

http://addicted2success.com/quotes/images-56-inspirational-picture-quotes-that-will-motivate-your-mind/


OPTION D: DRAWING & ANIMATION (KhanAcademy.org). Decide what cartoon character (or object) you will make using the basic shapes available. Make it simple. The KCB G9 student will do the Drawing & Coloring part. Wells G9 student will do the animation part. Be sure to watch and understand the video tutorials first before starting. Publish the link of your artwork into your blog. Follow the tutorial links below:

https://www.khanacademy.org/cs/tutorials/drawing
https://www.khanacademy.org/cs/tutorials/programming-basics


Enjoy and have fun! πŸ™‚

Compute All and Clear

Make a webpage with this design and functionalities:

The web design after entering two numbers and clicking the Compute Now button.

The web design after entering two numbers and clicking the Compute Now button.

There is only one button for computing all Math operations: ‘Compute Now’. So once the user enters two numbers and clicked the ‘Compute Now’ button, your webpage should display the 4 Math operations at once.

Also, when the user clicked the ‘Clear’ button all the computations will be erased:

The webpage after clicking the 'Clear' button.

The webpage after clicking the ‘Clear’ button.

Once done, turn in both HTML and JavaScript files in Edmodo.


Below is the grading system for this activity. If you successfully finished the activity for the……

…first 15 minutes you will get perfect score of 30 points.
…next 5 minutes after that you will get 25 points.
…next 10 minutes after that you will get 15 points.
…next minutes and beyond you will get 10 points.

Simple Calculator 2.0 and Simple Calculator 2.1

Simple Calculator Variation 2.0:
Modify your Simple Calculator so that it will display a design that looks like this:

Simple Calculator Variation 2.0

Simple Calculator Variation 2.0

Notice that it has only one button named as ‘Compute Now’; and it uses different h3 tags to display the results separately.

Once done, turn in the HTML and JavaScript files in Edmodo.


Simple Calculator Variation 2.1:

This is an enhancement of the file above with the ‘Clear’ button added. Once the user clicked the ‘Clear’ button, nothing will be displayed in each of the h3 elements.

Simple Calculator 2.2

Simple Calculator 2.1

Simple Calculator 2.0 when 'Clear' button is clicked.

Simple Calculator 2.1 when ‘Clear’ button is clicked.

Once done, turn in the HTML and JavaScript files in Edmodo.

My Simple Calculator

Use JavaScript to create a webpage that simulates a simple calculator: Here’s the HTML design:

HTML design for Simple Calculator

HTML design for Simple Calculator

The webpage should compute and display the result for the numbers entered by user based on the corresponding button. Here’s how the output should be looked like:

Sample output for the Simple Calculator.

Sample output for the Simple Calculator.

Hint: You must have separate function for each Math operator. These functions are all in one the same JavaScript file that you have.


function addNumbers(){

}

function subtractNumbers(){

}

function divideNumbers(){

}

function multiplyNumbers(){

}

Each function will be called by its corresponding button in the HTML. Once done, turn in both TWO files, HTML and JavaScript, in Edmodo. Try your best to do this by yourself.

Adding Two Numbers

Our goal is to make a webpage that allows user to enter 2 numbers and display the total of those two numbers after clicking the ‘Add Now’ button. Here’s how the HTML should look like:

The HTML design.

The HTML design.


Once you have the HTML design above, create now the javascript code that will add the two numbers. You may use your old files.

You may come up with a result similar with the image below. It is still wrong; and it is expected.

Those values enter by user are actually string.

Those values enter by user are actually string.

As you noticed, the values entered by user are considered as String (text) instead of an Integer (or numbers). Any character that we write in a textbox is always considered as String.

We need to use a built-in JavaScript function that converts a String value to Integer. Once the value is converted from String to Integer, we can now do mathematical operations to it.

parseInt() is the JavaScript built-in function that we need here. Please refer to this site on how to use parseInt(). It has explanations and samples on how to use it. Then apply parseInt() in your work.

Note: parseFloat() and Number() will also work.

Goodluck and try your best! πŸ™‚

Variations in the ‘Type Your Name’ file

Below are five different designs and output that you will create. You should have different HTML and JavaScript files for each of these.

Variation #1: (10 points)
You will let your user enter his/her name and after clicking the button you display the message below. Your work should have these filenames:
G9Jess_Variation1.html
G9Jess_Variation1.js

(You will have to change my name and grade, of course)

Output for Variation #1

Output for Variation #1

Once done, TURN IN the HTML and JavaScript files in Edmodo.


Variation #2: (10 points)
You will let your user enter his/her name and after clicking the button you display the message below. Your work should have these filenames:
G9Jess_Variation2.html
G9Jess_Variation2.js

(You will have to change my name and grade, of course)

Output for Variation #2

Output for Variation #2

Once done, TURN IN the HTML and JavaScript files in Edmodo.


Variation #3: (10 points)
You will let your user enter his/her name and after clicking the button you display the message below. Your work should have these filenames:
G9Jess_Variation3.html
G9Jess_Variation3.js

(You will have to change my name and grade, of course)

Output for Variation#3

Output for Variation#3

Once done, TURN IN the HTML and JavaScript files in Edmodo.


Variation #4: (20 points)
You will let your user enter his/her name and after clicking the button you display the message below. Your work should have these filenames:
G9Jess_Variation4.html
G9Jess_Variation4.js

(You will have to change my name and grade, of course)

Output for Variation#4

Output for Variation#4

Once done, TURN IN the HTML and JavaScript files in Edmodo.


Variation #5: (30 points)
You will let your user enter his/her name and after clicking the button you display the message below. Your work should have these filenames:
G9Jess_Variation5.html
G9Jess_Variation5.js

(You will have to change my name and grade, of course)

Output for Variation#5

Output for Variation#5

Once done, TURN IN the HTML and JavaScript files in Edmodo.

Type Your Name :)

In this tutorial we will create an HTML that will let our user type in a string value, his/her name. Once he/she clicked the ‘Click Here’ button, our JavaScript code will display his/her name with some greetings.

Here’s how the webpage looks like while waiting for the user to type in the name:

our webpage before the user enters his name.

our webpage before the user enters his name.

Then after the user entered his/her name and clicked the ‘Click here’ button, this will be the output:

our webpage after the user type in his name and clicked the button.

our webpage after the user type in his name and clicked the button.


Again, we need two files here: HTML and the JavaScript files. Here’s the code for the HTML file, input.html.

the HTML code.

the HTML code.

And here’s for the JavaScript file:

The JavaScript code.

The JavaScript code.


Explanation
Please refer to the colored pairs in the image below. Those pairs must be exactly the same to ensure proper referencing both for HTML and JavaScript codes.

Colored pairs must be written exactly the same.

Colored pairs must be written exactly the same in both HTML and JavaScript files.

onclick="javascript:displayUserInput() is an event that executes displayUserInput() once the user click the button.

var val1 = document.getElementById("value1").value; assigns whatever the value of value1 to the variable val.