Quiz Wireframe

gistfile1.txt

To complete this assignment:

First, decide on your quiz topic, then write up questions and answers as discussed above.

/*
const store = {
  // 5 or more questions are required
  questions: [
    {
      question: 'What color is broccoli?',
      answers: [
        'red',
        'orange',
        'pink',
        'green'
      ],
      correctAnswer: 'green'
    },
    {
      question: 'What is the current year?',
      answers: [
        '1970',
        '2015',
        '2019',
        '2005'
      ],
      correctAnswer: '2019'
    }
  ],
  quizStarted: false,
  questionNumber: 0,
  score: 0
};
*/

QUESTIONS

CONST STORE = [
    {
      question: 'What color is capital of Indiana?',
      answers: [
        'Indianapolis',
        'Chicago',
        'Madison',
        'Columbus'
      ],
      correctAnswer: 'Indianapolis'
    },
        {
      question: 'What color is capital of Illinois?',
      answers: [
        'Ann Arbor',
        'Chicago',
        'Peoria',
        'Springfield'
      ],
      correctAnswer: 'Springfield'
    },
    {
      question: 'What color is capital of Wisconsin?',
      answers: [
        'Madison',
        'Green Bay',
        'Madison',
        'St. Paul'
      ],
      correctAnswer: 'Madison'
    },
        {
      question: 'What color is capital of Ohio?',
      answers: [
        'Indianapolis',
        'Chicago',
        'Madison',
        'Columbus'
      ],
      correctAnswer: 'Columbus'
    },
        {
      question: 'What color is capital of Michigan?',
      answers: [
        'Anna Arbor',
        'Lansing',
        'Grand Rapids',
        'Detriot'
      ],
      correctAnswer: 'Lansing'
    }
  ]
  quizStarted: false,
  questionNumber: 0,
  score: 0
};

//Gather any image assets you want for your app.

Create "back of napkin" designs of the basic layout of your prototype.

* {
  text-align: center
  font-size: 16px;
  font-family: 'Times New Roman', serif
  background-color: lightgray;
}


From your back of napkin designs, create greybox HTML wireframes.

Start screen <button="start">
Quiz:
  
  Quiz Name
  Question Number (#/5)
  Score Correct (#/5)
  
  Question Asked
  Question Options with check boxes
  
  <button="select"
  .on click feedback "Yes!" or "Correct Answer"
  <button="next question"
Ending screen with score (#/5) and <button="(re)start">

<main> 
  <ul>
    <li>
      <h2>Question Ask
        <p>Question Answer
        <p>Question Answer
        <p>Question Answer
        <p>Question Answer
       <br>
       <h3>


//Your wireframe should include minimal CSS and no JavaScript.
//Your wireframes for each view can all be stored together in a single HTML file or each in their own separate file.
//Store your wireframe on GitHub and deploy it to GitHub pages.