use HTML5

The project does not reflect the real exams we see them online. In this project, you are designing a front-end exam, meaning that if someone who can use the data in the browser and by looking through the code, then s/he can find the exams answers. For serious exams, the data needs to be handled through the which is something we are

back end,

going to cover after spring break. The types of questions that you need to include in the exam are:

o Multiple choice. o Multiple answers.

o True/False o Fill in Blank (Answers of one word only)

• There should be at least that involve pictures in them (either as an answer or as a question).

• You have the freedom to choose the exams topics. You can make an exam about sports, celebrities, politics,

  computer science subjects, or any other topic. The idea here is not about testing in your knowledge about a specific topic, but it is testing your abilities to design an online exam.

four questions

PROJECT STRUCTURE

You can use Vlab or locally to create the following.

1. CreateafolderunderyourrealnameFirstNameLastName.

2. Createafolderinsidethefolderyoucreateinstep1andnameit

3. Createafolderinsidethefolderyoucreateinstep1andnameit .

4. Createafolderinsidethefolderyoucreateinstep1andnameit

5. Organizethecontentoftheprojectfilesinsidethefolders2-5(e.g.,anyimagesinsidethefolderofstep3,andthe

   html file to be inside the folder of step 1).

6. OpenVlaborNotepad++toworkonyourproject.

7. Go to the folder your created inside the step1 and create a file inside it (use V;ab/Notepad++ for that). Name the

   file index.html. This is the main webpage of the exam website.

8. You are going to design other HTML pages. Save all of them inside the main folder from step 1.

9. Once you finish working on the project and you are ready to submit it, then zip you main folder and upload it to

   blackboard.

cssFiles

. .

images

javascripts

HTML REQUIREMENTS

The final project should include several pages; here is the description for that.

o The main page called index.html should be the main gate for your project. It should have links to the other pages. The main page is home of your whole project. From there you can go to the other pages.

o An administrator page that provide several options to control the test. These options provide the administrator of the test the ability to generate a question, add a question, update and delete question(s) and build a fully online exam consist of multiple questions.

o One page for displaying the questions. Therefore, when you present the exam for the user to use, youshould display one question only per time. You should only have one page to display the examsquestions. Here is a suggested example

be creative and choose a simple and attractive theme).

(I am not going to specify the exact appearance of any of the page,

o Inside this page displays a single question, the main structure of displaying the exams question, youll need to start with the following HTML:

A

to hold the question text

A

to display the possible answers for the multiple choice/multiple answers and true false questions (not for fill in blank question)

A

to hold the answers and a way to submit the answers (like a button or it could contains other divs if you like (mainly for fill in blank question)).

< div id="submit">Submit Quiz

These are not the only divs that you are going to use in your webpage (there are others related to navigation through the test as described below, in addition, to other divs as needed), but these are the mainly tags related to the quizs question.

o Your website should have a navigation mechanism to move between the questions as described below.

You have to use JavaScript to automatically generate the exam. That way, you will not need to write a bunch of repetitive markup, and you can add and remove questions easily. The required navigation options are the following:

• Go to the first question.

• Go to next question.

• Go to previous question.

• Go to the last question.

• Skip this question.

• Finish the exam and show the results.

• Go to the main page.

• A status bar that shows the current users results out of the total number of questions.

o A summary page that shows the results of the user. Here you show the total number of of questions, how many correct one, the final progress bar and it shows all the questions with the user answers and the corrected answers.

CSS REQUIREMENTS

• Your webpages should be compatible with Chrome and Firefox (it is Ok, if it is not fully compatible with IE).

• Create a single CSS file that contains all the styles that you need to apply.

• Make sure to center all of your pages inside the middle of your screen, check week 4 for that.

• Define different styles for different kind of questions. Make all the multiple choice the same style, all the multiple answer the same style, all of the true/false same style and finally all the fill in blank same style.

• Be consistence when you move between the different pages. If there is shared things, then make them appear the same.

JAVASCRIPT REQUIREMENTS

The main JS events and functions required from you to write are the following (You can add others if you

need, but you have to implement the following).

You have to write your JS code using unobtrusive JavaScript approach.

Use the "use strict"; Directive to assure that all the variables, objects and others are declared before

that used. Check here for more information.

Inside the anonymous function associated with the window.load event, define the following;

• Define three references to the three HTML tags defined above (with IDs question, submitand result) under the names quizContainer, quizContainer and submitButton.

• Define an empty array called AllQuestions that will include all the questions and their answers.

• Define an empty array called UserAnswers that holds the answers of the user.

• Define an array of Boolean called AnswersStatus that should always have the same size of

  the array AllQuestions. The value for each element of this array is either true or false based on comparing the users answers with the actual answers for that question.

Define the following functions:

Function addQuestion which is responsible of adding one question to the quiz Function deleteQuestion which is responsible of deleting one question from the quiz. Function updateQuestion which is responsible of updating a questions content

Function buildQuiz which is responsible for building the whole quiz questions. Function randomizeQuiz which is responsible shuffling the questions and also their

answers. Function showInstanceFeedback which is responsible for displaying a feedback for the user

for his answer for the current question (Check examples in the event requirements)

Function showAllResults which is responsible of showing a summary of the users results of the quiz.

Function showNextQuestion that is responsible to move the user to the next question.

If the user on the last question then hide the Next Question navigation element (button, image, etc.). Otherwise, show it.

Function showPreviousQuestion that is responsible to move the user to the previous question.

If the user on the first question then hide the Previous Question navigation element

(button, image, etc.). Otherwise, show it.

Function showStatucBar that is responsible for displaying the status bar progress of the user.

EVENTS REQUIREMENTS

When you display a question for the user, make sure that all the answers have the same background. If you move your mouse over any answer, then highlight the answer with a different color. Once you leave the boundaries of the answer then reset the answer highlight to the original format. Here an example.

If the user choose an answer (click on the answer, choose the radio box or make a check inside a check box), then compare the users answer to the real answers. If they match then highlight the answer with a color, otherwise highlight it with different color. Here some example.

Correct Answer Wrong Answer

SOME LOGIC YOU HAVE TO FOLLOW.

• For any question, if the users answer matches the correct answer of the question, then update the array AnswersStatus with the value true of that question, and color the set of questions choices with color of your choice. Otherwise, update the value to false and color the answer choices with a different color of your choice.

• For the filling in blank question, you can to compare the users answer with the real one regardless of the letter cases of both of the answers.

• Update the progress bar as the user answers the question.

• Let users review their answers before submitting.

• If the user does not answer the question, then ask his for a confirmation. If he insists that he does not want to

  answer, then consider this as his final answers and consider it as wrong.

• Give users a summary of all of their answers inside the summary page.

  BONUS (10 POINTS).

Add a countdown timer (one minute) for every question to see if people can beat the clock or not.VALIDATE YOUR WORK.

• Open (XHTML) and (CSS)

• Click Validate by File Upload and then Browse to your websites files (test each one of them), or click Validate by

  direct Input and then copy/paste your code into the text box.

• If there are any errors, fix the first one, then repeat the previous steps.

  o Try to get the green bar for 0 errors. Yellow "tentatively valid" warnings are okay (The error messages can be hard to understand.