Skip to content

Instantly share code, notes, and snippets.

@tobnys

tobnys/index.html

Created July 6, 2017 15:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tobnys/bf8f89e777f53eb8fb6891227762db87 to your computer and use it in GitHub Desktop.
Save tobnys/bf8f89e777f53eb8fb6891227762db87 to your computer and use it in GitHub Desktop.
Download ZIP
Thinkful Quiz Project
Raw
index.html
<html lang="en">
<head>
<title>Gaming Quiz App</title>
<meta name="description" content="Gaming Quiz App made with HTML, CSS, JavaScript and jQuery!">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
</head>
<body>
<header role="banner">
<h1>Gaming Quiz!</h1>
</header>
<main role="main">
<div class="container">
<p>Welcome to my gaming quiz!</p>
<p>The quiz consists of 5 questions, to answer a question simply click on an answer followed by pressing the "submit" button below the question.</p>
<p>Press the button below to continue on to the quiz.</p>
<form class="question-form hidden">
<legend class="question js-question"></legend>
<label class="answer-one js-answer-one" data-label-index=1></label>
<label class="answer-two js-answer-two" data-label-index=2></label>
<label class="answer-three js-answer-three" data-label-index=3></label>
</form>
<button type="submit" class="index-button js-index-button">Click me!</button>
<div class="current-question js-current-question hidden">Current question: 1/5</div>
<div class="current-score js-current-score hidden">Correct answers: 0/5</div>
<div class="answer-result js-answer-result hidden">Correct!</div>
</div>
<div class="answer-box js-answer-box">
</div>
</main>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
(function(){
var correctAnswers = 0;
var i = 0;
var count = 1;
const arrayObject = [
{
question: "What is the most popular online game right now?",
A1: "League of Legends",
A2: "Overwatch",
A3: "Counter Strike: Global Offensive",
correctAnswer: "1",
count: "1"
},
{
question: "What percentage of the US population is some form of 'gamer'?",
A1: "30%",
A2: "60%",
A3: "90%",
correctAnswer: "2",
count: "2"
},
{
question: "What is the average gamer age?",
A1: "16",
A2: "22",
A3: "31",
correctAnswer: "3",
count: "3"
},
{
question: "What percentage of smartphone or tablet owners play games?",
A1: "24%",
A2: "46%",
A3: "68%",
correctAnswer: "3",
count: "4"
},
{
question: "What games have the best sales?",
A1: "The game with most features",
A2: "The most advertised game",
A3: "The better online experience",
correctAnswer: "2",
count: "5"
}
]
function finalWindow()
{
$(".container").html("<h2>Congratulations, you passed with a score of...</h2><h2>" + correctAnswers + "/5</h2><h2>Press the button below to restart the quiz!</h2><button type='submit' class='index-button js-final-button'>Restart!</button>")
$(".js-final-button").on("click", function(e){
window.location.href = "index.html";
console.log("final final");
});
}
function promptBox(currentAnswer)
{
i++;
count++;
if(currentAnswer === true)
{
$(".js-answer-box").html('<p>Correct answer!</p><br><button type="submit" class="answer-button js-answer-button">Next question</button>');
$(".js-answer-box").fadeIn("slow");
}
else
{
$(".js-answer-box").html('<p>Wrong answer!</p><br><button type="submit" class="answer-button js-answer-button">Next question</button>');
$(".js-answer-box").fadeIn("slow");
}
$(".js-answer-button").on("click", function(e){
if(count > 5)
{
$(".js-answer-button").prop("disabled", true);
console.log("button disabled");
clearHtml("form");
$(".current-question").addClass("hidden");
$(".current-score").addClass("hidden");
$(".question-form").addClass("hidden");
$(".js-answer-box").fadeOut(4000);
$(".js-index-button").attr("href", "index.html");
finalWindow();
}
else
{
$(".js-answer-box").fadeOut("slow");
addNewQuestions();
$(".js-index-button").prop("disabled", false);
}
});
}
// Function to update score, take an argument that checks whether the user scored right or wrong.
function updateScore(answer)
{
var currentAnswer;
if(arrayObject[i].correctAnswer === answer)
{
currentAnswer = true;
correctAnswers++;
console.log("Score updated - Correct Answer" + arrayObject.length);
$(".js-current-score").text("Correct answers: " + correctAnswers + "/" + "5");
//$(".js-current-question").text("Current question: " + arrayObject[i].count + "/" + "5");
}
else
{
currentAnswer = false;
console.log("Score updated - Wrong Answer");
$(".js-current-score").text("Correct answers: " + correctAnswers + "/" + "5");
//$(".js-current-question").text("Current question: " + count + "/" + "5");
}
promptBox(currentAnswer);
}
function handleAnswers()
{
var answerIndex;
$("form").on("click", "label", function(e){
answerIndex = $(e.target).closest("label").attr("data-label-index");
if($(e.target).closest("label").hasClass("label-checked") === true)
{
$(e.target).closest("label").removeClass("label-checked");
console.log("remove class");
}
else if($("label").hasClass("label-checked") === false)
{
//$(e.target).closest("label").addClass("label-checked");
$("[data-label-index=" + answerIndex + "]").addClass("label-checked");
console.log(answerIndex);
console.log(e.target);
}
});
$(".js-index-button").on("click", function(e){
if($("label").hasClass("label-checked") === true)
{
$("label").removeClass("label-checked");
}
updateScore(answerIndex);
$(".js-index-button").prop("disabled", true);
});
}
function addNewQuestions()
{
if(i === arrayObject.length)
{
//callsomefunctionhere
console.log("final");
}
else
{
$(".js-question").text(arrayObject[i].question);
$(".js-answer-one").text(arrayObject[i].A1);
$(".js-answer-two").text(arrayObject[i].A2);
$(".js-answer-three").text(arrayObject[i].A3);
$(".js-current-question").text("Current question: " + arrayObject[i].count + "/" + "5");
console.log("New questions added");
}
}
// Clears the given HTML elements.
function clearHtml(element)
{
$(element).remove();
console.log("HTML cleared");
}
// This function runs on load and responds to the initial button press on the absolute first page of the app.
function mainInitiate() {
$(".js-index-button").one("click", function(e){
e.preventDefault();
console.log("Index button clicked");
$(".current-question").removeClass("hidden");
$(".current-score").removeClass("hidden");
$(".question-form").removeClass("hidden");
clearHtml(".container p");
addNewQuestions();
handleAnswers(i);
console.log(i);
});
}
// Once the document has loaded then run the function.
$(mainInitiate());
})();
Raw
main.css
html {
font-family: 'Titillium Web', sans-serif;
background-color: #6FFFE9;
}
header {
height: 150px;
text-align: center;
padding-top: 3%;
}
header h1 {
font-size: 30px;
}
.hidden {
visibility: hidden;
}
.container {
border: solid black 1px;
padding: 15px;
height: 250px;
width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: #5BC0BE;
}
.container p {
text-align: center;
font-size: 18px;
}
.index-button {
width: 100px;
height: 35px;
position: absolute;
bottom: 10px;
right: 270px;
background-color: #3A506B; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
font-weight: bold;
}
.current-question {
position: absolute;
bottom: 5px;
right: 490px;
font-size: 14px;
font-weight: bold;
}
.current-score {
position: absolute;
bottom: 5px;
right: 10px;
font-size: 14px;
font-weight: bold;
}
.question-form {
}
legend {
padding-bottom: 10px;
}
label {
display: block;
height: 40px;
border: 1px solid black;
padding-left: 5px;
padding-top: 10px;
}
.answer-one {
border-bottom: 0;
}
.answer-two {
border-bottom: 0;
}
label:hover {
font-size: 20px;
transition: font-size 0.1s;
}
.fa-check {
font-size: 20px;
}
.label-checked {
color: #0B132B;
font-weight: bold;
font-size: 20px;
}
.answer-box {
border: solid black 1px;
border-top: 1;
top: 50px;
padding: 15px;
height: 100px;
width: 200px;
margin-left: auto;
margin-right: auto;
position: relative;
text-align: center;
display: none;
background-color: #5BC0BE;
}
.answer-box p {
display: inline-block;
text-decoration: bold;
}
.answer-button {
width: 100px;
height: 35px;
position: absolute;
bottom: 30px;
right: 67px;
background-color: #3A506B; /* Green */
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
font-weight: bold;
}
h2 {
text-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment