Skip to content

Instantly share code, notes, and snippets.

@FrancesFisk

FrancesFisk/gist:457685b70e32d735277da6a55598921d

Last active February 13, 2018 18:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save FrancesFisk/457685b70e32d735277da6a55598921d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save FrancesFisk/457685b70e32d735277da6a55598921d to your computer and use it in GitHub Desktop.
Download ZIP
quiz app
Raw
gistfile1.txt
************** HTML ****************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>The Office Quiz</title>
</head>
<body>
<header>
<h1 role="banner">The Office Quiz</h1>
</header>
<main role="main">
<!-- START PAGE -->
<div class="start-page">
<h2>How well do you know The Office?</h2>
<h3>Test your knowledge by taking this quiz!</h3>
<button id="startQuizBtn">Start</button>
</div>
<!-- QUESTION PAGE -->
<div class="question-area">
</div>
<!-- <div class="question-page">
<div class="question-box">
<img src="" alt="">
<form role="form">
<h3 class="question">Michael Scott was the central character of the The Office for how many seasons</h3>
<div class="choices">
<ul>
<li><input type="radio" id="radioButton"><label for="first">5</label></li>
<li><input type="radio" id="radioButton"><label for="second">6</label></li>
<li><input type="radio" id="radioButton"><label for="third">7</label></li>
<li><input type="radio" id="radioButton"><label for="fourth">8</label></li>
</ul>
</div>
<button type="submit">Submit</button>
</form>
</div>
<div class="current-status">
<div id="currentQuestion"></div>
<div id="currentScore"></div>
</div>
</div> -->
<!-- FEEDBACK PAGE -->
<!-- <div class="feedback-page">
<div class="question-box">
<img src="" alt="">
<form role="form">
<h3 class="question">Question 1: Michael Scott was the central character of the The Office for how many seasons?</h3>
<div class="choices">
<ul>
<li><input type="radio" id="radioButton"><label for="first">5</label>You got that right!</li>
<li><input type="radio" id="radioButton"><label for="second">6</label>Sorry, the correct answer was __</li>
<li><input type="radio" id="radioButton"><label for="third">7</label></li>
<li><input type="radio" id="radioButton"><label for="fourth">8</label></li>
</ul>
</div>
<button type="submit">Next</button>
</form>
</div>
<div class="current-status">
<div id="currentQuestion">You are on question 1 out of 1</div>
<div id="currentScore">Current score: 0 correct, 0 incorrect</div>
</div>
</div> -->
<!-- FINAL PAGE -->
<!-- <div class="final-page">
<h2>Way to go! You got __/__ correct!</h2>
<button>Play Again</button>
</div> -->
</main>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
************** JAVASCRIPT ****************
// create Questions
const questions = [
{number: 1,
question: "Michael Scott was the central character of the The Office for how many seasons?",
answers: {
a: "5",
b: "6",
c: "7",
d: "8"
},
correctAnswer: "c"
},
{number: 2,
question: "Who does Angela’s senator husband have a love affair with?",
answers: {
a: "Kelly",
b: "Nellie",
c: "Erin",
d: "Oscar"
},
correctAnswer: "d"
},
{number: 3,
question: "What is the name of Darryl's daughter?",
answers: {
a: "Jada",
b: "McKenzie",
c: "Zoey",
d: "Kayla"
},
correctAnswer: "a"
},
{number: 4,
question: "When Michael realizes he is in deep debt, how does he attempt to remedy his financial problems?",
answers: {
a: "Declaring bankruptcy by yelling, 'I declare bankruptcy!'",
b: "Getting a second job as a telemarketer",
c: "Running away by hopping on a train",
d: "All of the above"
},
correctAnswer: "d"
},
{number: 5,
question: "Where did Jim propose to Pam?",
answers: {
a: "Scranton branch rooftop",
b: "Niagara Falls",
c: "Gas Station",
d: "Dwight's beet farm"
},
correctAnswer: "c"
},
{number: 6,
question: "During Season 3, Dwight quits and starts working at which competitor paper company?",
answers: {
a: "Office Depot",
b: "Staples",
c: "Prince Paper",
d: "Big Red Paper Company"
},
correctAnswer: "b"
},
{number: 7,
question: "In Season 7, why was Michael forced to have 6 hours of counseling with Toby?",
answers: {
a: "He hit Meredith with a car",
b: "he forced Meredith to go to rehab",
c: "He punished his nephew by spanking him in front of everyone",
d: "He tried to kiss Oscar"
},
correctAnswer: "c"
},
{number: 8,
question: "Who plays drums in the band Scrantonicity?",
answers: {
a: "Kevin",
b: "Creed",
c: "Darryl",
d: "Andy"
},
correctAnswer: "a"
},
{number: 9,
question: "Which branch did Karen and Andy come from before transferring to Scranton?",
answers: {
a: "Stamford",
b: "Utica",
c: "New York City",
d: "Nashua"
},
correctAnswer: "a"
},
{number: 10,
question: "Michael promised a group of second graderes (Scott's Tots) he'd pay their tuition if they graduated from high school. He didn't have the money, and instead gave them:",
answers: {
a: "laptops",
b: "iPads",
c: "iPhones",
d: "laptop batteries"
},
correctAnswer: "d"
}
]
function hideQuestion() {
$(".question-area").hide();
}
hideQuestion();
// make the Start button lead to Question 1
function clearStartPage() {
$(".start-page").on("click", "#startQuizBtn", event => {
$(".start-page").hide();
$(".question-area").show();
})
}
clearStartPage();
function transitionQuestion() {
$(".question-area").on("click",".submit", event =>{
// $(".1").hide();
//$(".2").show();
})
}
transitionQuestion();
function showQuestion(item) {
let questionOne = `<div class="question-page">
<div class="question-box ${item.number}">
<img src="" alt="">
<form role="form">
<h3 class="question">${item.question}</h3>
<div class="choices">
<ul>
<li><input type="radio" id="radioButton"><label for="first">${item.answers.a}</label></li>
<li><input type="radio" id="radioButton"><label for="second">${item.answers.b}</label></li>
<li><input type="radio" id="radioButton"><label for="third">${item.answers.c}</label></li>
<li><input type="radio" id="radioButton"><label for="fourth">${item.answers.d}</label></li>
</ul>
</div>
<button type="submit" class="submit">Submit</button>
</form>
</div>
<div class="current-status">
<div id="currentQuestion"></div>
<div id="currentScore"></div>
</div>
</div>`
return $(".question-area").html(questionOne);
}
showQuestion(questions[0]);
// function showSecondQuestion() {
// let questionOne = `<div class="question-page">
// <div class="question-box">
// <img src="" alt="">
// <form role="form">
// <h3 class="question">${questions[0].question}</h3>
// <div class="choices">
// <ul>
// <li><input type="radio" id="radioButton"><label for="first">${questions[0].answers.a}</label></li>
// <li><input type="radio" id="radioButton"><label for="second">${questions[0].answers.b}</label></li>
// <li><input type="radio" id="radioButton"><label for="third">${questions[0].answers.c}</label></li>
// <li><input type="radio" id="radioButton"><label for="fourth">${questions[0].answers.d}</label></li>
// </ul>
// </div>
// <button type="submit">Submit</button>
// </form>
// </div>
// <div class="current-status">
// <div id="currentQuestion"></div>
// <div id="currentScore"></div>
// </div>
// </div>`
// return $(".question-area").html(questionOne);
// }
// showFirstQuestion();
// create question pages
function generateQuestionPg(questions) {
console.log("generateQuestionPg ran");
let questionElements = `
<div class="question-page">
<div class="question-box">
<img src="" alt="">
<form role="form">
<h3 class="question">${questions.question}</h3>
<div class="choices">
<ul>
<li><input type="radio" id="radioButton"><label for="first"></label></li>
<li><input type="radio" id="radioButton"><label for="second"></label></li>
<li><input type="radio" id="radioButton"><label for="third"></label></li>
<li><input type="radio" id="radioButton"><label for="fourth"></label></li>
</ul>
</div>
<button type="submit">Submit</button>
</form>
</div>
<div class="current-status">
<div id="currentQuestion"></div>
<div id="currentScore"></div>
</div>
</div>`
return $("main").html(questionElements);
}
// SUBMIT ANSWERS
// identify which answer is correct for each answer
// make submit button submit answer
// keep track of correct answers
// if answer is correct, display message 1
// if answer is incorrect, display message 2
// make Next button take user to the next question
// make the last question's Next button take user to the Final page
// display current number of correct answers at the bottom of the page
// display how many questions left at the bottom of the page
// display how many total number of correct answers in the Final page
// make restart button return to Start page
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment