Skip to content

Instantly share code, notes, and snippets.

@Mattteo1220

Mattteo1220/index.html

Created July 12, 2017 18:46
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 Mattteo1220/200c9d945d73978b45688f2d14a6c585 to your computer and use it in GitHub Desktop.
Save Mattteo1220/200c9d945d73978b45688f2d14a6c585 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<h1 class="header">Branches of Government Quiz</h1>
</nav>
<section class="start-page">
<h2 class="Starter-question">How well do you Know your Federal Government?</h2>
<button class="start" value="start" id="start">Start</button>
</section>
<main class="hidden">
<h2 class="question"></h2>
<section class="responses">
<form id="AnswerSheet">
<!-- <p><input type="button" value="Executive" class="answers"></p>
<p><input type="button" value="Legislative" class="answers"></p>
<p><input type="button" value="Judicial" class="answers"></p> -->
</form>
</section>
<section class="tracker">
<p class="DATA" id="numQuestion">Question <span class="clicker">1</span> of 5</p>
<p class="DATA" id="NumScore">Score <span id="scorer">0</span> of 5</p>
</section>
<ul class="list"></ul>
<form>
<label class="DATA" id="js-return"><input type="button" value="Back" class="nav"></label>
<label class="DATA" id="js-forward"><input type="button" value="Next" class="nav"></label>
</form>
</main>
<section class="hidden" id="end">
<h2>Great Job!</h2>
<p>You got <span class="end-clicker">0</span> out of 5. You scored <span class="percentage">0</span> %</p>
<p><label class="DATA" id="playAgain"><input type="button" value="Play Again?" name="play again" class="nav"></label></p>
</section>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
var questions = [
//question 1:
{
question: "Which branch of government can propose an amendment to the U.S. Constitution?",
answers: [
"Executive",
"Legislative",
"Judicial"
],
ID: 1,
correctAnswerString: "Legislative",
correctanswer: 2,
counter: 1,
userResponse: null
},
// question 2:
{
question: "Which branch of U.S. Government can propose bills?",
answers: [
"Executive",
"Legislative",
"Judicial"
],
ID: 2,
correctAnswerString: "Executive",
correctanswer: 1,
counter: 1,
userResponse: null
},
//question 3:
{
question: "Which Branch of government can declare executive actions unconstitutional?",
answers: [
"Executive",
"Legislative",
"Judicial"
],
ID: 3,
correctAnswerString: "Judicial",
correctanswer: 3,
counter: 1,
userResponse: null
},
//question 4:
{
question: "Which branch of government has the person who serves as commander and chief of the military?",
answers: [
"Executive",
"Legislative",
"Judicial"
],
ID: 4,
correctAnswerString: "Executive",
correctanswer: 1,
counter: 1,
userResponse: null
},
//question 5:
{
question: "Which branch of govt can formally accuse justices of crimes related to his/her duties?",
answers: [
"Executive",
"Legislative",
"Judicial"
],
ID: 5,
correctAnswerString: "Legislative",
correctanswer: 2,
counter: 1,
userResponse: null
}
]
//Constants
var BEGINQUIZ = "#start";
var REMOVECLASS = "hidden";
var STARTPAGE = ".start-page";
var SET = "main";
var QUESTION = ".question";
var NEXTIDENTIFIER = "#js-forward";
var CURRENTQUESTION = 1;
var ANSSHEET = "#AnswerSheet";
var GOBACK = "#js-return";
var NUMQUESTION = 1;
var NUMOFQUESTION = ".clicker";
var ANSWERS = ".answers";
var FINISH = "Finish";
var END = "#end";
var PLAYAGAIN = "#playAgain";
var CLICKER = 1;
var CORRECT = "correct";
var INCORRECT = "incorrect";
var SCORER = 0;
var NUMCORRECT = "#scorer";
var SCORE = ".end-clicker";
var ENDSCORE = 0;
var PERCENTAGE = ".percentage";
var PERC = 0;
//Functions
function renderQuestion(ID){
console.log("`renderQuestion` ran");
$(SET).removeClass(REMOVECLASS);
$(STARTPAGE).addClass(REMOVECLASS);
$(ANSSHEET).html("");
for (var i = 0; i < questions.length; i++) {
if (questions[i].ID === ID) {
questions[i].counter = 1;
$(questions[i].answers).each(function(){
$(ANSSHEET).append('<p><input type="button" id="'+this+"_"+questions[i].ID+'" value="'+this+'" data-parentid="'+questions[i].ID+'" class="answers"></p>');
});
$(QUESTION).html(questions[i].question);
}
}
$(ANSWERS).click(function(){
setResponse($(this).val(), $(this).data("parentid"));
});
}
function getNextSetOfQuestions() {
console.log("`getNextSetOfQuestions` ran");
$(NEXTIDENTIFIER).on("click", function(){
CURRENTQUESTION++;
renderQuestion(CURRENTQUESTION);
});
}
function goBackSetOfQuestions() {
console.log("'goBackSetOfQuestions' ran");
$(GOBACK).click(function(){
CURRENTQUESTION--;
renderQuestion(CURRENTQUESTION);
for (var i = 0; i < questions.length; i++) {
if (questions[i].ID === CURRENTQUESTION){
questions[i].counter = 1;
}
}
});
}
function startQuiz() {
console.log("`startQuiz` ran");
$(BEGINQUIZ).click(function(){
renderQuestion(CURRENTQUESTION);
})
}
function numOfQuestions() {
console.log("`numOfQuestions` ran");
$(NUMOFQUESTION).text(CLICKER);
if (CLICKER < questions.length) {
$(NEXTIDENTIFIER).click(function(event){
CLICKER++;
if (CLICKER === questions.length){
$(NEXTIDENTIFIER).on("click", function(event){
$(SET).addClass(REMOVECLASS);
$(END).removeClass(REMOVECLASS);
});
}
$(NUMOFQUESTION).text(CLICKER);
})
}
$(GOBACK).on("click", function(event){
CLICKER--;
$(NUMOFQUESTION).text(CLICKER);
if (CLICKER < 1) {
$(GOBACK).on("click",function(event){
event.stopPropagation();
});
}
});
};
function setResponse(response, id) {
for (var i = 0; i < questions.length; i++) {
if (questions[i].ID === id) {
if (questions[i].counter > 0){
questions[i].userResponse = response;
$(NUMCORRECT).text(SCORER);
$(SCORE).text(ENDSCORE);
$(PERCENTAGE).text(PERC);
questions[i].counter--;
if (response === questions[i].correctAnswerString) {
$("#" + response + "_" + id).addClass(CORRECT);
SCORER++;
ENDSCORE++;
PERC = (ENDSCORE / 5) * 100;
$(NUMCORRECT).text(SCORER);
$(SCORE).text(ENDSCORE);
$(PERCENTAGE).text(PERC);
}
else {
$("#" + response + "_" + id).addClass(INCORRECT);
alert("Sorry that is Wrong, The real answer is the " + questions[i].correctAnswerString + " Branch");
}
}
else {
alert("You have already selected your answer. Please click Next.")
}
}
}
}
function endTest() {
console.log("`endTest` ran");
$(STARTPAGE).on("click",function(){
for (var i = 0; i < questions.length; i++){
questions[i].userResponse = null;
questions[i].counter = 1;
}
CURRENTQUESTION = 1;
renderQuestion(CURRENTQUESTION);
});
};
function playAgain() {
$(PLAYAGAIN).on("click",function(event){
location.reload();
})
}
function handleResponses() {
getNextSetOfQuestions();
startQuiz();
goBackSetOfQuestions();
numOfQuestions();
playAgain();
endTest();
};
$(handleResponses());
Raw
main.css
body {
background-color: navy;
}
.header {
border:1px solid black;
background-color: white;
color: red;
text-align: center;
}
h2 {
border:1px solid black;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoBUug26Q1qfUNyo07yycljPLHdT-npVwQnng_yC6F7nj4xLLfVw");
background-repeat: no-repeat;
background-size: 100%;
color: white;
text-align: center;
}
.question {
color: black;
height: 200px;
}
input {
cursor: pointer;
background-color: lightblue;
color: red;
}
.hidden{
display: none;
}
button {
cursor: pointer;
}
.responses {
margin-right: auto;
margin-left: auto;
}
.DATA {
display: inline-block;
height: 30px;
width: 100px;
border:1px solid black;
text-align: center;
font-size: 15px;
margin:5px;
background-color: white;
}
.tracker {
position: relative;
bottom: 0;
}
.nav {
height: 30px;
width: 100px;
}
.answers {
width: 600px;
height: 50px;
}
.correct {
background-color: lightgreen;
}
.incorrect {
background-color: brown;
}
#start {
height: 50px;
width: 100px;
font-size: 100%;
}
#js-finish {
background-color: red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment