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.
- 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 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.
- 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)
- 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.
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.
- 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.
- Include the HTML/CSS/JS files and archive (zip) it. Save it as yourfullname-week8project.zip.