006 - Math Test

From Courses

Contents 1 Overview 2 Learning Outcomes 3 Screencast 4 Workflow 5 Assessment 6 Links 7 What's Due and When?

Overview

Imagine you are a math teacher and you need to give an exam to your students. Instead of standing at the ditto machine for hours and wasting all that paper, you decide that it would be much easier to test your students skills by creating a math test using HTML and javascript.

The basic idea of this javascript application is that you are going to check to see if the answers that the student enters are correct. If the answer is correct then the script should provide feedback letting them know that their answer is correct or not.

Learning Outcomes

In this assignment you will implement the following:

• a function that compares the value of your initialized variable with the value entered into a text input field of the form called "myForm."
• an event handler "onclick" that calls your function
• a method called "getElementById" and property "innerHTML" that will provide the feedback to they student after the click the submit button.

Screencast

Coming Soon!

Workflow

Create a five question test with some basic math problems.

1. To get started, write an HTML page with a simple form that looks something like the following. Note: This form does not contain any required event handlers or name values necessary to make this work. Add what is necessary. You will not need an "action" or "method" attribute. But you will need a "name" attribute. Why?

<form name="myForm">
Question 1: 2 + 2 = <input type="text" size="2"><br><br>
<input type= "button" value="submit">
</form>

2. Add the event handler to the form button that will call the function which you are about to write. Which handler are you going to use? What's the name of the function?
3. In your script, declare and assign values to 5 variables. Each variable is the correct answer to each of the 5 problems on the exam. For example,

   var answerOne = 4;
   

4. Now, write a function that checks to see if the value of the form field (the given answer) matches the value of the variable that you just created in your script. If it matches or not, let the student know by displaying feedback on the page next to their answer. The function will contain conditional logic that checks each answer. The conditional looks something like this:

   if (condition)
     {
     code to be executed if condition is true
     }
   else
     {
     code to be executed if condition is not true
     }
   

5. Start with using the alert() method within the conditional statement so you can check that the if/else is working correctly. In "pseudo code" if the answer is correct, trigger the alert. If not, trigger another alert.
6. Once you know the conditional statement is working correctly, replace the pop up window with a statement that contains the getElementById method and innerHTML property which will write on the HTML a prompt alerting the user that the answer is either correct and incorrect. Examine this example javascript code to see how this can work
7. Once you get it working, send me the HTML page.

Assessment

• Does your code demonstrate a grasp on the basic javascript programming concepts put forth in the reading and demonstrations?

Links

• Using JavaScript and forms
• Writing Else/If Statements
• Javascript Functions

What's Due and When?

• Tuesday, Week 7 by 3pm
• Turn in this assignment by emailing me your CSS and HTML pages in a ZIP file.