CMSC 210
Spring 2017
Creating a Web Quiz (manually)

Due: Wed, May 3

For this assignment, you may work individually or in groups of size 2 or 3.(no groups of more than 3 will be permitted).    
By putting more than one name on the assignment, you are stating that both people contributed significantly to each part.
All group members will receive the same score.

Assignment:   (worth 50 exercise points)      

For this assignment, you will be using HTML, CSS, JavaScript and PhP.     You have all of the tools you need in order to achieve this.    There may be better tools out there, but you should restrict yourself to what we have seen in this course.

Your functional task:
  • create a quiz 
    • A sample quiz page is to the right.
  • each quiz question should be on it's own page
    • at least one must be "multiple choice"
    • at least one must be "fill in the blank"
    • at least one must be "select all that apply"
  • for each question, there should be a submit button and a "hint" button.
    • the "hint" button brings up a hint for the user.  
      • This hint may be displayed in an alert box, or in the browser window itself.
    • the submit button should contact the server for checking of the answer.
      • the resulting page should tell the user whether the answer was correct
      • if the answer was incorrect, the correct answer should be displayed
      • This resulting page can either:
        • display the next question, or
        • have a link/button to get to the next question
    • After the last question, the final score for the person should be displayed.  
  • How many questions in total?
    • Individual work:  at least 5
    • Group of 2: at least 8
    • Group of 3:  at least 10
  • Overall stats reporting at the end of the quiz (worth 5 of the 50 points):
    • Individual work:  
      • display the average score of all people
    • Groups of 2 or 3: 
      • display the average score of all people
      • display the number of people who got EACH question right.

Sample quiz Page

Additional requirements:
  • Each page should have a common banner at the top and bottom of the page.  
    • You are welcome to use HTML code to create these banners or to create image(s) to use.
  • The quiz pages should look similar to each other via a css file, found at
    • I should be able to go into your directory and modify the css file and all of the pages displayed will look different.
    • What should I be able to change?
      • the background color
      • the color and font size of the text of the question
      • the color and fond size of the text of the possible answers for "multiple choice" and "select all that apply" questions.
      • other attributes as you see fit.
  • There must be a file at which outlines the following:
    • the things that can be changed via the css file
    • any extra credit options you have implemented, including a brief description of each
Extra Credit:
  • Utilize cookies in an interesting way.
  • Effective uses of AJAX or JQUERY.
  • Add more questions.   This will  NOT garner extra credit if the main functionalities are not in place.

  • You may wish to create the HTML  for each question first.  Then call upon it as necessary.
  • Put all Javascript code in its own file.  Then call upon that file in your HTML.
    • You MAY have a separate Javascript file for each quiz page or only one Javascript file.


1)  Choose a member of the group to host the page in their directory.    Publish the necessary files to the account.    I will be looking at the following URL:   (replacing someuserid as appropriate)

2)  EACH GROUP MEMBER, go to Canvas and for this assignment, enter:
  •  the list of members of the team
  •  the URL where I will find your work.
  • a statement of what you feel you individually contributed to the project.