edsoliman/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Health & Fitness Quiz</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-height intial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="main.css">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
    </head>

    <body>
      <!--Start quiz page-->
      <main>
        <div id="container">
          <section role="health & fitness quiz main">
            <h1>Health & Fitness Quiz</h1>
            <p>Time to put your health & fitness knowledge to the test!</p>
            <button class="button" id="js-start-button" type="button">Start Quiz</button>
          </section>
        <div>
      </main>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="questions.js"></script>
    <script src="index.js"></script>
    </body>
<html>

## index.js
//global variables
let questionNumber = 1;
let score = 0;
let currentQuestion = whichQuestion(QUESTIONOBJ);


function handleStartButton() {
  $('#container').on('click', '#js-start-button', function(event) {
    renderQuestion();
  });
}

function whichQuestion(questArray) {
  let question = questArray.find(question =>
    question.number === questionNumber);
  return question;
}

//helper function - append HTML to DOM
function renderQuestion() {
  $('#container').html("<p role='score' class='score'>Score: " + score + "</p><p role='question number' class='question'>Question: " + questionNumber + "/10</p><form><fieldset><legend>" + currentQuestion.question + "</legend><input type='radio' id='ans-1' value=0 name='IIFYM' required><label for='ans-1'>" + currentQuestion.answers.a + "</label><br><input type='radio' id='ans-2' value=1 name='IIFYM' required><label for='ans-2'>" + currentQuestion.answers.b + "</label><br><input type='radio'id='ans-3' value=2 name='IIFYM' required><label for='ans-3'>" + currentQuestion.answers.c + "</label><br><input type='radio' id='ans-4' value=3 name='IIFYM' required><label for='ans-4'>" + currentQuestion.answers.d + "</label><button id='submit-button' class='button' type='button'>Submit Answer</button></fieldset></form>");
};

function handleSubmitButton() {
  $('#container').on('click', '#submit-button', function(event) {
    questionNumber++;
    let userAnswer = $("input[name='IIFYM']:checked").val();
    if (questionNumber === 11 && userAnswer == currentQuestion.value) {
      score++;
      corrFeedbckFinQuesTemplate();
    } else if (questionNumber === 11 && userAnswer != currentQuestion.value) {
      incorrectFeebckFinQuesTemplate();
    } else if (questionNumber < 11 && userAnswer == currentQuestion.value) {
      score++;
      corrFeedbckNotFinQuesTemplate();
    } else if (questionNumber < 11 && userAnswer != currentQuestion.value) {
      incorrFeebckNotFinQuesTemplate();
    }
  });
};

// helper function - correct feedback template - final question
function corrFeedbckFinQuesTemplate() {
$('#container').html(
  "<section role='feedback main' class='correct-feedback'><h2>Congrats, you got it right!</h2><button id='see-results-button' class='button'type='button'>See Results</button></section>");
};

//helper function - correct feedback template - not final question
function corrFeedbckNotFinQuesTemplate() {
  $('#container').html(
  "<section role='feedback main' class='correct-feedback'><h2>Congrats, you got it right!</h2><button id='next-question-button' class='button'type='button'>Next Question</button></section>");
};

//helper function - incorrect feedback template - not final question
function incorrFeebckNotFinQuesTemplate() {
  $('#container').html(
  "<section role='feedback main' class='incorrect-feedback'><h2>Sorry, that's not quite right...</h2><p>The correct answer is"+ currentQuestion.correctAnswer + "</p><button id='next-question-button' class='button'type='button'>Next Question</button>");
};

//helper function - incorrect feedback - final question
function incorrectFeebckFinQuesTemplate() {
  $('#container').html(
  "<section role='feedback main' class='incorrect-feedback'><h2>Sorry, that's not quite right...!</h2><p>The correct answer is" + currentQuestion.correctAnswer + "</p><button id='see-results-button' class='button'type='button'>See Results</button>");
};

function handleSeeResultsButton() {
  $('#container').on('click', '#see-results-button',function(event) {
    console.log('submitToScore is linked');
    $('#container').html("<section role='results main' class='results-page'><h2>Congrats, you've completed the quiz!</h2><p>You received a " + score + "/10.</p><button id='reset-button' class='button' type='reset'>Restart Quiz</button><section>");
  });
};

function handleNextQuestionButton() {
  $('#container').on('click', '#next-question-button', function(event) {
    currentQuestion = whichQuestion(QUESTIONOBJ);
    renderQuestion();
  });
};

function handleResetButton() {
  $('#container').on('click', '#reset-button', function(event) {
    resetCounters();
    currentQuestion = whichQuestion(QUESTIONOBJ);
    location.reload();
  });
};

//helper function - reset global counters
function resetCounters() {
  questionNumber = 1;
  score = 0;
};

function handleQuizApp() {

  handleStartButton();
  handleSubmitButton();
  handleNextQuestionButton();
  handleSeeResultsButton();
  handleResetButton();
}

$(handleQuizApp);

## main.css
/*General styling*/
* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
  }

  html {
    min-height: 100%;
    background-image: url(https://hdqwalls.com/download/girl-fitness-model-pic-2880x1800.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  /*Form styling*/
  legend {
    text-align: center;
    margin: 50px 0 35px 0;
    text-shadow: 1px 1px #606164;
  }

  form {
    width: 50%;
    margin: 0 auto;
    min-width: 420px;
    color: white;
    font-size: 36px;
    font-family: 'Roboto Condensed', sans-serif;
  }

  fieldset {
    border: 0;
  }

  input {
    font-size: 20px;
    margin: 10px 5px;
  }

  label {
    cursor: pointer;
    margin: 5px auto;
    background-color: rgba(0, 0, 0, .55);
    padding: 10px;
    width: calc(100% - 50px);
    display: inline-block;
    font-size: 25px;
  }

  label:hover {
    background-color: rgba(30, 165, 243, 0.822);
  }

  .button {
    display: block;
    font-size: 28px;
    margin: 15px auto;
    font-family: 'Roboto Condensed', sans-serif;
    border: solid 2px #363946;
    background-color:  #ebca52ec;
    color: #363946;
  }

  .button:hover {
    background-color: #363946;
    color: #ebca52ec;
  }

  /*Text styling*/
  div h1, p, h2 {
    text-align: center;
    width: fit-content;
    margin: 15px auto;
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
  }

  div h1, .incorrect-feedback h2, .correct-feedback h2, h2 {
    font-size: 58px;
    color: #ebca52ec;
  }

  div p {
    font-size: 33px;
    text-shadow: 3px 3px #363946;
  }

  .score, .question {
    color:  #ebca52ec;
  }

  /*Responsiveness*/
  @media only screen and (min-width: 550px) {
    .score, .question {
      display: inline-block;
      padding: 0 50px;
    }

    .question {
      margin-left: calc(100% - 500px);
    }


## questions.js
//This object contains data regarding each question
const QUESTIONOBJ = [
    {
    question: 'What does the popular fitness term IIFYM stand for?',
    answers: {
      a: 'It Is For Your Mental',
      b: 'If It Fits Your Macros',
      c: "It Isn't Fun You Maniac",
      d: "I'm In For Your Mind",
    },
    correctAnswer: ' "If It Fits Your Macros."',
    number: 1,
    value: 1,
    },
    {
    question: ' How many calories equate approximately to one pound of fat loss?',
    answers: {
      a: '1000',
      b: '1500',
      c: '2500',
      d: '3500',
    },
    correctAnswer: ' "3500."',
    number: 2,
    value: 3,
    },
    {
    question: 'Which of the following metabolic pathways is largely responsible for providing your body with quick, intense energy up to ~10 seconds?',
    answers: {
      a: 'Cyclic AMP',
      b: 'AMP Kinase',
      c: 'ATP-PC',
      d: 'Gluconeogenesis',
    },
    correctAnswer: ' "ATP-PC."',
    number: 3,
    value: 2,
    },
    {
    question: 'What is one advantage of HIIT training?',
    answers: {
      a: 'Burn maximum calories in minumum time',
      b: 'Burn a greater percentage of fat when compared to LISS',
      c: 'Low impact on the joints',
      d: 'Keeps the heart rate steady' ,
    },
    correctAnswer: ' "Burn maximum calories in minumum time."',
    number: 4,
    value: 0,
    },
    {
    question: 'What are one of the benefits of long term fasting?',
    answers: {
      a: 'Increase in HGH',
      b: 'Increase in fat mobilization',
      c: 'Increase in fat oxidation',
      d: 'All of the above',
    },
    correctAnswer: ' "All of the above."',
    number: 5,
    value: 3,
    },
    {
    question: 'Which of the following health benefits would result from regular walking?',
    answers: {
      a: 'Increased blood pressure',
      b: 'Decreased risk of CHD',
      c: 'Increased resting heart rate',
      d: 'Decreased heart rate',
    },
    correctAnswer: ' "Decreased risk of CHD."',
    number: 6,
    value: 1,
    },
    {
    question: 'Which of the following is a long term adaptation to muscular strength training?',
    answers: {
      a: 'Increased size of type II muscle fibers',
      b: 'Decreased size of type II muscle fibers',
      c: 'Increased number of type II muscle fibers',
      d: 'Decreased number of type II muscle fibers',
    },
    correctAnswer: ' "Increased size of type II muscle fibers."',
    number: 7,
    value: 0,
    },
    {
    question: 'What is the definition of muscular strength?',
    answers: {
      a: 'The ability of muscles to exert maximum force in one contraction',
      b: 'The ability of muscles to exert minimum force in one contraction',
      c: 'The ability of muscles to repeatedly exert maximum force',
      d: 'The ability of muscles to repeatedly exert minimum force',
    },
    correctAnswer: ' "The ability of muscles to exert maximum force in one contraction."',
    number: 8,
    value: 0,
    },
    {
    question: 'Which of the following would be classified as in the aerobic fitness zone?',
    answers: {
      a: '65% max heart rate',
      b: '75% max heart rate',
      c: '85% max heart rate',
      d: '95% max heart rate',
    },
    correctAnswer: ' "75% max heart rate."',
    number: 9,
    value: 1,
    },
    {
    question: '"Which body type has broad shoulders and a muscular build?"',
    answers: {
      a: 'Ectomorph',
      b: 'Mesomorph',
      c: 'Endomorph',
      d: 'Somatotype',
    },
    correctAnswer: ' "Mesomorph."',
    number: 10,
    value: 1,
    }
    ];

## quizapplivepage.txt
https://esoliman0325.github.io/quiz-app/
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Health & Fitness Quiz</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-height intial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="main.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
	</head>

	<body>
	<!--Start quiz page-->
	<main>
	<div id="container">
	<section role="health & fitness quiz main">
	<h1>Health & Fitness Quiz</h1>
	<p>Time to put your health & fitness knowledge to the test!</p>
	<button class="button" id="js-start-button" type="button">Start Quiz</button>
	</section>
	<div>
	</main>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="questions.js"></script>
	<script src="index.js"></script>
	</body>
	<html>
	//global variables
	let questionNumber = 1;
	let score = 0;
	let currentQuestion = whichQuestion(QUESTIONOBJ);


	function handleStartButton() {
	$('#container').on('click', '#js-start-button', function(event) {
	renderQuestion();
	});
	}

	function whichQuestion(questArray) {
	let question = questArray.find(question =>
	question.number === questionNumber);
	return question;
	}

	//helper function - append HTML to DOM
	function renderQuestion() {
	$('#container').html("<p role='score' class='score'>Score: " + score + "</p><p role='question number' class='question'>Question: " + questionNumber + "/10</p><form><fieldset><legend>" + currentQuestion.question + "</legend><input type='radio' id='ans-1' value=0 name='IIFYM' required><label for='ans-1'>" + currentQuestion.answers.a + "</label><br><input type='radio' id='ans-2' value=1 name='IIFYM' required><label for='ans-2'>" + currentQuestion.answers.b + "</label><br><input type='radio'id='ans-3' value=2 name='IIFYM' required><label for='ans-3'>" + currentQuestion.answers.c + "</label><br><input type='radio' id='ans-4' value=3 name='IIFYM' required><label for='ans-4'>" + currentQuestion.answers.d + "</label><button id='submit-button' class='button' type='button'>Submit Answer</button></fieldset></form>");
	};

	function handleSubmitButton() {
	$('#container').on('click', '#submit-button', function(event) {
	questionNumber++;
	let userAnswer = $("input[name='IIFYM']:checked").val();
	if (questionNumber === 11 && userAnswer == currentQuestion.value) {
	score++;
	corrFeedbckFinQuesTemplate();
	} else if (questionNumber === 11 && userAnswer != currentQuestion.value) {
	incorrectFeebckFinQuesTemplate();
	} else if (questionNumber < 11 && userAnswer == currentQuestion.value) {
	score++;
	corrFeedbckNotFinQuesTemplate();
	} else if (questionNumber < 11 && userAnswer != currentQuestion.value) {
	incorrFeebckNotFinQuesTemplate();
	}
	});
	};

	// helper function - correct feedback template - final question
	function corrFeedbckFinQuesTemplate() {
	$('#container').html(
	"<section role='feedback main' class='correct-feedback'><h2>Congrats, you got it right!</h2><button id='see-results-button' class='button'type='button'>See Results</button></section>");
	};

	//helper function - correct feedback template - not final question
	function corrFeedbckNotFinQuesTemplate() {
	$('#container').html(
	"<section role='feedback main' class='correct-feedback'><h2>Congrats, you got it right!</h2><button id='next-question-button' class='button'type='button'>Next Question</button></section>");
	};

	//helper function - incorrect feedback template - not final question
	function incorrFeebckNotFinQuesTemplate() {
	$('#container').html(
	"<section role='feedback main' class='incorrect-feedback'><h2>Sorry, that's not quite right...</h2><p>The correct answer is"+ currentQuestion.correctAnswer + "</p><button id='next-question-button' class='button'type='button'>Next Question</button>");
	};

	//helper function - incorrect feedback - final question
	function incorrectFeebckFinQuesTemplate() {
	$('#container').html(
	"<section role='feedback main' class='incorrect-feedback'><h2>Sorry, that's not quite right...!</h2><p>The correct answer is" + currentQuestion.correctAnswer + "</p><button id='see-results-button' class='button'type='button'>See Results</button>");
	};

	function handleSeeResultsButton() {
	$('#container').on('click', '#see-results-button',function(event) {
	console.log('submitToScore is linked');
	$('#container').html("<section role='results main' class='results-page'><h2>Congrats, you've completed the quiz!</h2><p>You received a " + score + "/10.</p><button id='reset-button' class='button' type='reset'>Restart Quiz</button><section>");
	});
	};

	function handleNextQuestionButton() {
	$('#container').on('click', '#next-question-button', function(event) {
	currentQuestion = whichQuestion(QUESTIONOBJ);
	renderQuestion();
	});
	};

	function handleResetButton() {
	$('#container').on('click', '#reset-button', function(event) {
	resetCounters();
	currentQuestion = whichQuestion(QUESTIONOBJ);
	location.reload();
	});
	};

	//helper function - reset global counters
	function resetCounters() {
	questionNumber = 1;
	score = 0;
	};

	function handleQuizApp() {

	handleStartButton();
	handleSubmitButton();
	handleNextQuestionButton();
	handleSeeResultsButton();
	handleResetButton();
	}

	$(handleQuizApp);
	/General styling/
	* {
	box-sizing: border-box;
	font-family: Arial, Helvetica, sans-serif;
	}

	html {
	min-height: 100%;
	background-image: url(https://hdqwalls.com/download/girl-fitness-model-pic-2880x1800.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	}

	/Form styling/
	legend {
	text-align: center;
	margin: 50px 0 35px 0;
	text-shadow: 1px 1px #606164;
	}

	form {
	width: 50%;
	margin: 0 auto;
	min-width: 420px;
	color: white;
	font-size: 36px;
	font-family: 'Roboto Condensed', sans-serif;
	}

	fieldset {
	border: 0;
	}

	input {
	font-size: 20px;
	margin: 10px 5px;
	}

	label {
	cursor: pointer;
	margin: 5px auto;
	background-color: rgba(0, 0, 0, .55);
	padding: 10px;
	width: calc(100% - 50px);
	display: inline-block;
	font-size: 25px;
	}

	label:hover {
	background-color: rgba(30, 165, 243, 0.822);
	}

	.button {
	display: block;
	font-size: 28px;
	margin: 15px auto;
	font-family: 'Roboto Condensed', sans-serif;
	border: solid 2px #363946;
	background-color: #ebca52ec;
	color: #363946;
	}

	.button:hover {
	background-color: #363946;
	color: #ebca52ec;
	}

	/Text styling/
	div h1, p, h2 {
	text-align: center;
	width: fit-content;
	margin: 15px auto;
	color: white;
	font-family: 'Roboto Condensed', sans-serif;
	}

	div h1, .incorrect-feedback h2, .correct-feedback h2, h2 {
	font-size: 58px;
	color: #ebca52ec;
	}

	div p {
	font-size: 33px;
	text-shadow: 3px 3px #363946;
	}

	.score, .question {
	color: #ebca52ec;
	}

	/Responsiveness/
	@media only screen and (min-width: 550px) {
	.score, .question {
	display: inline-block;
	padding: 0 50px;
	}

	.question {
	margin-left: calc(100% - 500px);
	}
	//This object contains data regarding each question
	const QUESTIONOBJ = [
	{
	question: 'What does the popular fitness term IIFYM stand for?',
	answers: {
	a: 'It Is For Your Mental',
	b: 'If It Fits Your Macros',
	c: "It Isn't Fun You Maniac",
	d: "I'm In For Your Mind",
	},
	correctAnswer: ' "If It Fits Your Macros."',
	number: 1,
	value: 1,
	},
	{
	question: ' How many calories equate approximately to one pound of fat loss?',
	answers: {
	a: '1000',
	b: '1500',
	c: '2500',
	d: '3500',
	},
	correctAnswer: ' "3500."',
	number: 2,
	value: 3,
	},
	{
	question: 'Which of the following metabolic pathways is largely responsible for providing your body with quick, intense energy up to ~10 seconds?',
	answers: {
	a: 'Cyclic AMP',
	b: 'AMP Kinase',
	c: 'ATP-PC',
	d: 'Gluconeogenesis',
	},
	correctAnswer: ' "ATP-PC."',
	number: 3,
	value: 2,
	},
	{
	question: 'What is one advantage of HIIT training?',
	answers: {
	a: 'Burn maximum calories in minumum time',
	b: 'Burn a greater percentage of fat when compared to LISS',
	c: 'Low impact on the joints',
	d: 'Keeps the heart rate steady' ,
	},
	correctAnswer: ' "Burn maximum calories in minumum time."',
	number: 4,
	value: 0,
	},
	{
	question: 'What are one of the benefits of long term fasting?',
	answers: {
	a: 'Increase in HGH',
	b: 'Increase in fat mobilization',
	c: 'Increase in fat oxidation',
	d: 'All of the above',
	},
	correctAnswer: ' "All of the above."',
	number: 5,
	value: 3,
	},
	{
	question: 'Which of the following health benefits would result from regular walking?',
	answers: {
	a: 'Increased blood pressure',
	b: 'Decreased risk of CHD',
	c: 'Increased resting heart rate',
	d: 'Decreased heart rate',
	},
	correctAnswer: ' "Decreased risk of CHD."',
	number: 6,
	value: 1,
	},
	{
	question: 'Which of the following is a long term adaptation to muscular strength training?',
	answers: {
	a: 'Increased size of type II muscle fibers',
	b: 'Decreased size of type II muscle fibers',
	c: 'Increased number of type II muscle fibers',
	d: 'Decreased number of type II muscle fibers',
	},
	correctAnswer: ' "Increased size of type II muscle fibers."',
	number: 7,
	value: 0,
	},
	{
	question: 'What is the definition of muscular strength?',
	answers: {
	a: 'The ability of muscles to exert maximum force in one contraction',
	b: 'The ability of muscles to exert minimum force in one contraction',
	c: 'The ability of muscles to repeatedly exert maximum force',
	d: 'The ability of muscles to repeatedly exert minimum force',
	},
	correctAnswer: ' "The ability of muscles to exert maximum force in one contraction."',
	number: 8,
	value: 0,
	},
	{
	question: 'Which of the following would be classified as in the aerobic fitness zone?',
	answers: {
	a: '65% max heart rate',
	b: '75% max heart rate',
	c: '85% max heart rate',
	d: '95% max heart rate',
	},
	correctAnswer: ' "75% max heart rate."',
	number: 9,
	value: 1,
	},
	{
	question: '"Which body type has broad shoulders and a muscular build?"',
	answers: {
	a: 'Ectomorph',
	b: 'Mesomorph',
	c: 'Endomorph',
	d: 'Somatotype',
	},
	correctAnswer: ' "Mesomorph."',
	number: 10,
	value: 1,
	}
	];