Final Project – Phase 1
During the next three weeks, you will build an interactive Quiz App. This application will be a web page that will review everything we have covered in the course and a few topics that we haven’t that you will have to research on your own.
The front-end interface will consist of:
- A starting/opening screen with a button to start the quiz.
- A question screen which will have a question and 4 multiple choice answers.
- A final score screen giving user their total score with a button to try again.
The Quiz App will have specific requirements:
- Will use responsive web design practices.
- Stores all of the data (questions and answers) in a JavaScript array of objects.
- Each screen will dynamically display when the user answers each question and clicks a next button or link.
- Will track the current score of correct answers and display a final score when the user runs Building the Quiz App.
The Quiz App will be built in 3 phases:
- In the first phase you will wireframe the design of all screens in HTML and CSS and create your questions and answers data array in a separate (.js) file.
A sample set of data could be coded like this:
let allQuestions = [
{
question: “What is Matt favorite color?”,choices: [“Blue”, “Black”, “Yellow”, “Blank”, “Clear” ],correctAnswer: 4},
{
question: “Who is Matt’s Favorite fiction Author?”, choices: [“Brennan Manning”, “JD Salinger”, “Stephen King”, “Jack Kerouac”],correctAnswer: 3
},
…
- In the second phase (week 7) you will take the HTML and CSS wireframe and create a working prototype. This will take most of the HTML out of the HTML page and put in the JavaScript file to dynamically display. This will allow “stepping” through each question as the user clicks the next button. This will simulate the Quiz App working but without the displaying of questions or keeping score.
- In the third phase (week 8) you will take your working prototype and make it a complete working app with the all questions and final score keeping.
Phase 1:
- Decide on the questions and answers you will use.
- Build your data store object with those questions and answers
- Create the three screens (starting screen, questions/answer screen, final score screen)
Submission instruction:
- Include the HTML/CSS/JS files and archive (zip) it. Save it as yourfullname-week6-project.zip.
Final Project – Phase 2
As stated last week, in the second stage of the Final Project, you will take your HTML and CSS wireframe and create a working prototype. This prototype will be completed in three steps.
The first step is to create the three (3) separate pages to be used as each screen in the Quiz App:
- Welcome screen – contains the title of the quiz, a brief explanation of the quiz contents (if needed) and a Start/Go button.
- Question screen – displays each question and 4 multiple choice answers and a Submit/Next button.
- Closing screen – display the user’s final score (correct out of total questions), any other dynamic message you wish to display to the user and a “Play Again” button to re-start the Quiz.
Note: If you want to add additional features to the Quiz such as updating scoring and current questions, etc. you can.
The second step is to take the three separate screens and combine them into one HTML page with one CSS file. You will need to do this because the different screens will display dynamically via JavaScript and need to be on the same .html page. Make sure the layout and design for each screen is the same.
The third step is to add the JavaScript necessary so it is a working prototype. A prototype lets you run through the application to see how it would work without most of the coding in place yet. The Quiz App prototype would just display each of the three (s) screens and each button is clicked. This allows “stepping” through your application to show to others and give you (the developer) to understand what the code will be doing at each screen.
Here is a fun example of a Comics Quiz App as an example:
Note: Your design does not need to be as nice, but it gives you an idea of what you can do.
Submission instruction:
- Include the HTML/CSS/JS files and archive (zip) it. Save it as yourfullname-week7-project.zip.
Final Project – Phase 3
For the third and final stage of the Final Project, you will take your prototype and make it a working Quiz App application.
- Add the necessary code to retrieve from the data store object (created in Week 6) and display each question object in each question screen.
- Keep track of each correct answer the user completes.
- Display the final score and a dynamic message on the closing screen.
- Allow the user to restart the game and show the question screen again with the first question.
- On the question screen, do not allow the next question to be displayed until the select a possible answer from the 4 options is displayed. Note: You can display an inline error message or in an alert box.
Submission instruction:
- Include the HTML/CSS/JS files and archive (zip) it. Save it as yourfullname-week8project.zip.
