INFO 100 / CSE 100 Fluency with Information Technology

Project 2: Student as Teacher—
Creating an Online Quiz

"A thinker sees his own actions as experiments and questions—as attempts to find out something. Success and failure are for him answers above all."—Friedrich Nietzsche (1844 - 1900)

Honest Effort

This assignment will be checked against all of the other projects as well as all past quarter INFO/CSE 100 assignments for plagiarism.  An advanced client-server plagiarism-detection software application will be used to assist in the discovery of such "assignment collaboration".  This class has a 0 tolerance policy on cheating.

Preparation

You are required to have completed Labs 7 and 8 before starting this project.
You are also required to have read the following before starting this project.

Fluency with Information Technology (by Lawrence Snyder)

QuickStart to JavaScript (by Forest Lin)

This project utilizes information you learn in the JavaScript unit and is worth 150 points. It consists of two parts.

Notepad icon Deliverables
  1. Quiz GUI and Planning
    1. create the interface.
    2. write a narrative plan for quiz logic that will score the quiz.
  2. Quiz Scoring
    1. build on the form you created to create the initial quiz logic.
    2. incorporate a multiple answer question with check boxes.
    3. create the final question with text box for your quiz.
    4. integrate the multiple parts into one file.
    5. reflect on your project.

Introduction

When you use the WWW, you probably encounter pages that require you to interact with them in some way, such as by clicking on a button or completing the text fields on a form. This interaction is accomplished through the use of HTML combined with logic implemented using a variety of programming languages, located either on the browser or at the server.

The ultimate goal of Project 2 is to create an interactive quiz using JavaScript and HTML. You code several distinct parts of this quiz then combine them to create a single program. You may choose to use questions about JavaScript similar to the ones in the textbooks or you may develop questions in an area where you have some expertise.

Objectives

This project and its various pieces require you to incorporate the programming concepts covered in the JavaScript unit. On successfully completing this project, you should be able to

Grading Criteria

This project is worth 150 points. Points will be assigned based on:

Each part is assigned points as follows:

Deliverable Points
Project 2A

Part A.1

15
Part A.2
10
Project 2B

Part B.1

25

Part B.2

25

Part B.3

25

Part B.4

40

Part B.5

10

Total

150

Overall Project Steps

The project consists of two parts with separate turn-in dates. In Part 2A, you will create the Graphical User Interface (GUI) and write a plan for your coding. In Part 2B, you will add the scoring to the HTML, add mouseover effects based on the user's total score, and integrate all the pieces into a complete quiz.

This project consists of six parts that together result in nine different files you submit to the instructor. In Part A, you will

In Part B, you will

By now you should be comfortable with the HTML components that comprise the interface design of the quiz. Use your skills and understanding of proper design to provide good instructions and valid metaphors to help people use your exam and to make it aesthetically pleasing.

information icon Note

You may want to refer to the Snyder text, QuickStart, or the W3 Schools Web site for details on how to accomplish specific tasks.

In order for an online quiz to be interactive and independent, that is, not requiring your constant attention, you need to provide the program with enough instructions that the computer can "correct" the quiz for the user and alert them to incorrect answers. This means giving explicit and unambiguous instructions on how to determine correct answers from incorrect ones without your involvement.

The logic that allows the computer to "understand" is at the heart of programming. You will use JavaScript as the language for providing these instructions. JavaScript allows you to continue working with the Web page environment and HTML.

The questions used for your quiz are based on the content in the JavaScript unit or a subject about which you are very knowledgeable. A school subject or hobby are good choices. Make sure you review your quiz for correct answers as well as correct code.

Project 2A (25 points)

This Project part consists of two pieces. In the first piece, you create the user interface and the foundation for your program. In the second piece, you create a planning document explaining in human language with some code "snippets".how you will grade the quiz.

1. Create the Interface (15 points)

To create this foundation you should:

  1. Create a Web page called "parta.html" using either of these "shell" documents: (1 point)
  2. Create a form with eight text input boxes and a submit button. (2 points)
  3. Create a question to go with each text box that is based on the content in the JavaScript unit or your favorite subject. These questions should be answered using either one word or a number. If needed, use a series of underscores to create a blank space. (2 points) For example:
    "1 + __ = 2", or
    "A __________ is an identifier used for a location in memory where a program can store, access, and restore information."
  4. Your Web page should include a "last modified" date. Make sure to put text around it so that it is clear what the date refers to. A date alone on a page does not help your viewer understand what that date means. (2 points)
    Hint: See Snyder, Chapter 20 or W3 Schools, "Learn JavaScript: JS Date."
  5. Use JavaScript to change the background of your form. Use the appropriate object and property. (2 points)
    Hint: See W3 Schools, "Learn HTML: HTML Background," and Snyder, Chapters 4 and 19.
  6. Comment your code. For each line of JavaScript you create, write comments that explain what your code is doing. Feel free to explain blocks of code all at once. However, make sure that each line of your code is explained in detail. (3 points)
  7. Validate this html file. (3 points)

2. Create the Planning Document (10 points total)

Before you begin this piece, be sure to read the entire project description for Project 2B to understand what you will be doing in the next part. In this planning document, you will describe the logic you will use for quiz scoring:

Write, step by step, a narrative of how the script you will code in Project 2B will address each of these situations. The intention here is to think through the project and create a narrative in English (with JavaScript) that will guide you through coding the project.

Turn In Project 2A

notepad icon Project 2A Deliverables
  1. "parta.html"
    1. eight text box questions with one word or one number answers.
    2. a "Submit" button.
    3. a last modified date
    4. validate your project to
      1. html 4.01 transitional or
      2. xml 1.0 strict
  2. "planning.doc" or "planning.txt"
    1. a word or text file that describes as a narrative how your script will score the online quiz.

Submit these two files by November 13 before 10pm.

Go to the Turn-In Procedure section to submit these project pieces for Project 2A.

Part 2B (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)

notepad icon Deliverables

In Part B.1 you create

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

"" Project 2B Deliverables

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 2B.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 Project 2B

Submit the completed project by November 27.

Make sure your submission includes all seven files outlined in the Turn In Project 2B section above.

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 2A Online Due Date: Tuesday, November 13, before 10:00 pm.

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

Your score will be based on: