Order from us for quality, customized work in due time of your choice.
Final Project – Phase 1
During the next three weeks, you will build an interacti
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.
Order from us for quality, customized work in due time of your choice.