INFO 100 / CSE 100 Fluency with Information Technology

Project 2: Student as Teacher—
Creating an Online Quiz

Part 2B: Scoring the Quiz (125 points)

In this project part, you will build on the HTML GUI that you created in Part 2A, and follow the planning narrative you created in order to code the scoring for the quizzes.

1. Code the Initial Quiz Logic (25 points)

In this part of the project you build on the form you coded in Part A and check the answers from your user. However, do not modify the original file, "parta.html." Instead, make a copy of the file, rename the copy "partb1.html," and add the code for this part to your new file.

To build on your form:

1. Establish a variable to hold the score of the person taking the quiz. (1 point)
2. Create a function that checks to see if the answers are correct. Realize that to check the answer placed in any text box, you need to refer to the text box by name and look at its value. If an answer is correct, add one to the person's score. Do this for each question. (3 points)
3. In your form HTML tag, add an "onSubmit" attribute that calls the function you just created. (3 points)
4. If the score the person gets is above a six, change the background to one color; otherwise make it turn a different color. The color choice is up to you. (3 points)
5. Create two Web pages. One should display "Good job!" Name this page "good.html." The other should display "Study more!" Name this page "study.html." There does not need to be any additional content on these pages unless you are feeling creative. (4 points)
6. Find two images of the same size and create a mouse-over event. Because clicking on this linked image calls a function, link the image to "partb1.html." Make sure the images are in the public domain. The easiest way to do this is to create your own image with a program such as Photoshop or Microsoft Paint. Hint: See W3 Schools, "Learn JavaScript: JS Animation." (5 points)
7. Create a function that checks the score to see if the score is over seven. If the score is seven or higher, have "good.html" open in a new window. If the score is lower than seven, have "study.html" open in a new window. Call this function when the linked image is clicked. Be sure to include text near the image that instructs the user what to do. (5 points)
8. Comment your code as you did for Part A. Remember, commenting code shows you understand the logic and placement of your code. It can show you understand the concept, even if you are having problems with the implementation. (3 points)

2. Code a Multiple Answer Question That Uses Checkboxes (25 points)

In this part of the project you create a new Web page. So far you have "parta.html," "partb1.html," "study.html" and "good.html." You use this new Web page to test a new part of your project and add a question with multiple correct answers using a series of checkboxes.

To create this test page:

1. Create a new Web page called "partb2.html." Be sure to add the head, body, and respective closing tags. (1 point)
2. Create a new form with a submit button. (2 points)
3. Write a question that has more than one answer. For a correct answer, ensure that the user must select more than one answer, but less then all of the answers. (4 points) For example:
   Which of the following are valid HTML tags? (Check all that apply)
   
   • < html>
   • < wordwrap>
   • <h1>
   • <p>
4. Create a checkbox for each answer. Remember to name each input on your form. (4 points)
   Hint: See W3 Schools, "Learn HTML: HTML Forms."
5. Write a function that checks to make sure the correct boxes are selected when the user clicks the "Submit" button. If they are, add one to a variable that holds the score. Use the same variable name you used in "partb1.html." (5 points)
6. Print the score to the Web page after the submit button is pushed. (6 points)
7. Comment your code as you did for Project 2A and Project 2B.1. (3 points)

3. Code an Array for a Question with Multiple Correct Answers (25 points)

In this part of the project you create the final question for your quiz. Although a student only needs to type in one response, this question must have more than one possible correct answer. Create this question on a separate Web page, just as you did for the question in Project 2B.2.

To create your final question:

1. Create a new Web page called "partb3.html." (1 point)
2. Create a new form with a submit button. (2 points)
3. Write a question with more than one answer. This question should have at least three possible answers. For example, "Name one property of an algorithm." has five possible correct responses. (3 points)
4. Create a text box as you did for the first eight questions. (1 point)
5. Create an array to hold the possible answers for this question. (5 points)
6. Create an iteration that compares the answer entered in the text box to the items in your array when the submit button is clicked. If there is a match, add one to a variable to hold the score. Use the same variable you used in "partb1.html." (5 points)
7. Print the score to the Web page after the submit button is clicked. (5 points)
8. Comment your code as you did in the earlier pages. (3 points)

4. Put It All Together (40 points)

In this final part of the Web site, you integrate the previous parts into one file.

1. Create a copy of your "partb1.html" page. Rename it "project2final.html." (1 point)
2. Add "partb2.html" and "partb3.html" to your "project2final.html" project page. You should remove the aspects of partb2.html and partb3.html that ask you to print the score to the Web page. (15 points)
3. Add a "close window” button to your "good.html" and "study.html" files. Use the appropriate object and property. (10 points)
4. Comment your code as you did for the other pages. Code without comments will lose points. (4 points)
5. Be sure to test your code and debug as needed. (10 points)

5. Reflect on Your Project (10 points)

In this part you reflect on the programming process you used for this project. Include responses to the following:

1. What parts or aspects of this project did you find to be the easiest to do? Why? (1 point)
2. What parts or aspects of this project did you find to be the hardest to do? Why were they difficult? (1 point)
3. Describe the types of errors you found when debugging your code. Did you make the same kinds of mistakes in multiple places? (2 points)
4. What aspects of your quiz would you change? (2 points)
5. What recommendations do you have for improving this project for future students? (2 points)
6. How much time did you spend on each part of this project? An estimate is acceptable. (1 point)
7. Save this file as "reflections.doc" or "reflections.txt." (1 point)

Turn In Project 2B

After you complete Project 2B.4, submit the following to the CollectIt dropbox, following the Turn-In Procedure below:

1. "partb1.html"
   1. all the content from the "parta.html" file plus:
      • a background that changes color depending on the final score;
      • an image that changes upon mouse over; and
      • a conditional that opens a specific window when the linked image is clicked, depending on the score.
2. "good.html"
   1. a header saying "Good job!”
   2. a button that closes the window when clicked.
3. "study.html"
   1. a header saying, "Study more!”
   2. a button that closes the window when clicked.
4. "partb2.html"
   1. a working multiple answer question with checkboxes.
   2. a score that is presented when the submit button is clicked.
5. "partb3.html"
   1. a working multiple answer question with a text box.
   2. a score that is printed when the "Submit" button is clicked.
   3. an array that holds the possible answers for your question from Part B.3.
   4. an iteration that checks the answer for your Part B.3 question against the array.
6. "project2final.html"
   1. a working quiz with the content and functionality from partb1.html, partb2.html, and partb3.html.
7. "reflections.doc" or "reflections.txt"
   1. a word or text file with your reflections about the process of programming your online quiz

Turn-In Procedure

You will be submitting your Project 2 files through a Catalyst turn-in. Upon submission, you will get an online receipt verifying the files you have turned in.  Please SAVE this receipt—just in case something does go wrong, you'll have proof you submitted the assignment. Turn in all project pieces for each Project Part.

Project 2B Online Due Date: Tuesday, November 27, before 10:00 pm.

• Click Here to Turn In Project Files for Dave's lab sections AA & AB
• Click Here to Turn In Project Files for Keith's lab sections AC & AD
• Click Here to Turn In Project Files for Sam's lab sections AE & AF

Your score will be based on:

• How well your site meets the requirements named above, in a technical / HTML / JavaScript sense.
• The quality of your quiz scoring and mouseovers.
• How well your site meets the requirements for format and content. This refers to the clarity of your questions, the correctness of your answers, and the instructions given to the user for completing the quiz.
• The care taken in thinking through the programming in the planning narrative and the thoughtfulness of your discussion in your reflection paper.
• Note that in order to be fair to students who put a lot of work into their projects, we want to reward effort, creativity, and care taken. Miminal completion of the requirements won't receive as high a score as a project that shows the results of effort. Remember: The more you do, the more you'll learn, and the easier this will become.