acarter43/SVUquiz.html

## svuquiz.css
* {
    box-sizing:border-box;
  }

  body {
    background-color:black;
    background-image: url("http://static.tvgcdn.net/feed/1/354/thumbs/115778354_1300x1733.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    font-family: "Roboto", helvetica, sans-serif;

  }

  .header {
    text-align:center;
  }
  .title {
    display: block;
    width: auto;
    height: 35px;
   padding:60px;


  }
  main {
    width: 500px;
    padding: 40px;
    height:500px;
    border-radius: 3px;
    background: black;
    margin: 0 auto;
    border:none;
    margin-top:100px;
    text-align: center;
    background: rgb(205, 205, 205);
    background: rgba(205, 205, 205, 0.6);


  }

  button {


    width:30%;
    margin-left:auto;
    margin-right:auto;
    align-content: center;


  }

 .results {
  text-align:center;
  color:white;
  padding-top:-100px;
 }

 .form {
  text-align: left;
  padding-left:120px;
  margin-bottom:30px;
 }

#count {
  color:grey;
  -webkit-text-stroke: 1px black;

}

iframe {
  width:400px;
  height:200px;
}

## SVUquiz.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1">
	<link rel="stylesheet" href="svuquiz.css">
	<title>Quiz</title>
</head>

<body class='body'>
<main class="main">
	<header class='header' role="banner">
		<h1 class='Title'>Law & Order SVU Quiz</h1>
	</header>
	<!-- show which question you're on -->
	<span id="count"></span>
	<span id="currentscore"></span>
	<!-- toggles between intro and question div -->
	<div id='js-intro'>
		<p class="intro-sentence">Law & Order SVU is a groundbreaking series from the Law & Order Franchise. Let's test your knowledge of the show's plots and characters!</p>

		<!-- SVU Theme Song -->
		<iframe src="https://www.youtube.com/embed/0HlUCWQpjxQ?rel=0&amp;controls=0&amp;showinfo=0;autoplay=0&controls=0;&loop=1;&playlist=0HlUCWQpjxQ?" frameborder="0" allowfullscreen volume="0"></iframe>
		<!-- start button hidden after pressed -->
		<button type='submit' class='tab intro-submit' id='js-intro-submit'>Start</button>
	</div>

	<div class="quizQuestions"></div>


	</main>


</div>
<script
	src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
	<script src="svuquiz.js"></script>

</body>
</html>

## svuquiz.js
//questions
const questions =
[{
	// start at 0 to keep the count correct
	question: 'start -0'
},
{
	question: 'When did Law & Order SVU begin?',
	options: ['Jan. 17, 1999', 'September 20,1999', 'March 19,1999', 'June 1, 1999'],
	answer: 'September 20,1999'
}, {
	//2
	question: 'Law & Order SVU was orginally named...',
	options: ['Sex Crimes & Passion', 'Another Law & Order', 'Sex Crimes', 'Law and Order Sex Crimes Unit'],
	answer: 'Sex Crimes'
}, {
	//3
	question: 'Olivia and Elliot are named after...',
	options: ['Taylor Swifts pets', 'The creators pets', 'The creators children', 'No one in particular'],
	answer: 'The creators children'
}, {
	//4
	question: 'Olivia Benson (played by Mariska Hargitay) keeps a photograph of her real life mother on her set desk. She is the daughter of...',
	options: ['Josephine Hargitay', 'Jayne Mansfield', 'Marie Hargitay', 'Marie Benson'],
	answer: 'Jayne Mansfield'
}, {
	//5
	question: 'Which actor played the role of Merritt Rook on SVUs 200th episode?',
	options: ['Robin Willams', 'John Ritter', 'Bradley Cooper', 'Brad Garrett'],
	answer: 'Robin Willams'
}, {
	//6
	question: 'Which character sets a television record for the only fictional character played by a single actor, appearing on 10 different television shows?',
	options: ['Det. Olivia Benson', 'Det. Elliot Stabler', 'Det. John Munch', 'Det. Nick Amaro'],
	answer: 'Det. John Munch'
}, {
	//7
	question: 'Why did Chris Meloni leave SVU in real life?',
	options: ['Better contract on a new hit series', 'Couldnt reach contract aggreement', 'Soured relationship with staff', 'Decided it was time for Stabler to retire'],
	answer: 'Couldnt reach contract aggreement'
}, {
	//8
	question: 'In 2016 what did SVU exiting showrunner, Warren Leight do for his final episode?',
	options: ['Moment of silence for law enforement', 'Brought Stabler back', 'Kill an SVU detective', 'Leight is still the showrunner'],
	answer: 'Kill an SVU detective'
}, {
	//9
	question: 'Detective Tutuola, played by Ice T only supposed to be a part of the show for 4 episodes...why did the role expand?',
	options: ['The SVU team was lacking diversity', 'John Munch needed a partner', 'Ice T brought a unique perspective', 'Ice T asked to stay'],
	answer: 'Ice T asked to stay'
}, {
	//10
	question: 'Which character has a partially collapsed lung after insisting on doing their own stunts?',
	options: ['Olivia Benson', 'Nick Amaro','Elliot Stabler', 'Amanda Rollins'],
	answer: 'Olivia Benson'
}
]

// start # correct at 0, start the question count at 1 (skip empty 0 question)
 correctAnswers = 0;
 i = 1;

// div for questions and radio 0-3
function createQuizQuestions(){
const quizQuestions = `
	<div id='quizQuestions'>
		<h3>${questions[i].question}</h3>
		<form class="form">
			<label class='answer'>
				<input type="radio" name='answerOption' value='${questions[i].options[0]}'>
				<span>${questions[i].options[0]}</span>
			</label>

			<br>

			<label class='answer'>
				<input type="radio" name='answerOption' value='${questions[i].options[1]}'>
				<span>${questions[i].options[1]}</span>
			</label>

			<br>

			<label class='answer'>
				<input type="radio" name='answerOption' value='${questions[i].options[2]}'>
				<span>${questions[i].options[2]}</span>
			</label>

			<br>

			<label class='answer'>
				<input type="radio" name='answerOption' value='${questions[i].options[3]}'>
				<span>${questions[i].options[3]}</span>
			</label>
		</form>
		<button type="submit" class="answer-button" id="js-answer">Submit Answer</button>
		 <button type="submit" class="next-button" id="js-next">Next Question</button>
		 <div class="results" id="js-results">
		 </div>
	</div>
	`
//check answers after submit answer clicked
// remove the results text /update count/ go to next question
		$('.main').append(quizQuestions);
		let nothingChecked = !$('input[name=answerOption]:radio:checked').val()
		$('#js-answer').on("click", checkAnswer);
		 $('#js-next').on("click", function(){
		$('#quizQuestions').remove();
		$('.check-answers').remove();
			if(i < questions.length){
				createQuizQuestions();
				createQuestionCount();

			}
			// if there's not another question go to results/ restart page
			else
			{

				createQuestionsDone();
				$('#js-restart').click(function(){
					location.reload();
				})
			}
		})
}
		// });
		// $('#js-next').on("click", function(){
		//$('#quizQuestions').remove();
		//$('.check-answers').remove();
			//if(i < questions.length){
				//createQuizQuestions();
				//createQuestionCount();
			//}
			//else
			//{

				//createQuestionsDone();
				//$('#js-restart').click(function(){
				//	location.reload();
				//})
			//}
		//})
//}

// after start button clicked toggle with questions and count

$('#js-intro-submit').click(function(){
	$('#js-intro').toggle();

	//let nothingChecked = !$('input[name=answerOption]:radio:checked').val()
	//$('#js-intro').addClass('hidden');


	createQuizQuestions();
	createQuestionCount();

})
// count questions, show text saying which question you're on
function createQuestionCount(){
	const questionCount = `
		<div class='change-question-number'>
			<p class='question-number-text'>Question</p>
			<br>
			<p class='question-number-number'>${i + 1}</p>
		</div>
	`
	$('#count').text('Question '+i+' of '+(questions.length-1));

	$('#questions').prepend(questionCount);


		//if (i===0) {
		//$('#js-intro-submit').show().text('Start');
		//$('#B')

}

// done, show results and allow restart
function createQuestionsDone (){
	const questionsDone = `
	<div>

		<br>
		<p class='end-num'>${correctAnswers} out of ${i-1} correct.</p>
	</div>
	<button class='end-button' id='js-restart'>Restart Quiz</button>
	`
	$('.main').append(questionsDone);
}


//function changeButton (){
	//$('')
// }

// check answers and update text

function checkAnswer(){

	let userAnswer = $('input[name=answerOption]:radio:checked').val()
	const correctBlock =
	`<div class='check-answers'>
		<h4 class="answers-text">Correct!</h4>
	</div>`

	const incorrectBlock = `
	<div class='check-answers'>
		<h4 class="answers-text">
		Sorry, <br> The correct answer is ${questions[i].answer}
		</h4>
	</div>
	`

	if(userAnswer === questions[i].answer){
		$('.results').append(correctBlock);
		correctAnswers++;
	}else{
		$('.results').append(incorrectBlock);
	}
	i++;

}
	* {
	box-sizing:border-box;
	}

	body {
	background-color:black;
	background-image: url("http://static.tvgcdn.net/feed/1/354/thumbs/115778354_1300x1733.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	font-family: "Roboto", helvetica, sans-serif;

	}

	.header {
	text-align:center;
	}
	.title {
	display: block;
	width: auto;
	height: 35px;
	padding:60px;


	}
	main {
	width: 500px;
	padding: 40px;
	height:500px;
	border-radius: 3px;
	background: black;
	margin: 0 auto;
	border:none;
	margin-top:100px;
	text-align: center;
	background: rgb(205, 205, 205);
	background: rgba(205, 205, 205, 0.6);


	}

	button {


	width:30%;
	margin-left:auto;
	margin-right:auto;
	align-content: center;


	}

	.results {
	text-align:center;
	color:white;
	padding-top:-100px;
	}

	.form {
	text-align: left;
	padding-left:120px;
	margin-bottom:30px;
	}

	#count {
	color:grey;
	-webkit-text-stroke: 1px black;

	}

	iframe {
	width:400px;
	height:200px;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1">
	<link rel="stylesheet" href="svuquiz.css">
	<title>Quiz</title>
	</head>

	<body class='body'>
	<main class="main">
	<header class='header' role="banner">
	<h1 class='Title'>Law & Order SVU Quiz</h1>
	</header>
	<!-- show which question you're on -->
	<span id="count"></span>
	<span id="currentscore"></span>
	<!-- toggles between intro and question div -->
	<div id='js-intro'>
	<p class="intro-sentence">Law & Order SVU is a groundbreaking series from the Law & Order Franchise. Let's test your knowledge of the show's plots and characters!</p>

	<!-- SVU Theme Song -->
	<iframe src="https://www.youtube.com/embed/0HlUCWQpjxQ?rel=0&controls=0&showinfo=0;autoplay=0&controls=0;&loop=1;&playlist=0HlUCWQpjxQ?" frameborder="0" allowfullscreen volume="0"></iframe>
	<!-- start button hidden after pressed -->
	<button type='submit' class='tab intro-submit' id='js-intro-submit'>Start</button>
	</div>

	<div class="quizQuestions"></div>


	</main>


	</div>
	<script
	src="https://code.jquery.com/jquery-3.2.1.min.js"
	integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	crossorigin="anonymous"></script>
	<script src="svuquiz.js"></script>

	</body>
	</html>
	//questions
	const questions =
	[{
	// start at 0 to keep the count correct
	question: 'start -0'
	},
	{
	question: 'When did Law & Order SVU begin?',
	options: ['Jan. 17, 1999', 'September 20,1999', 'March 19,1999', 'June 1, 1999'],
	answer: 'September 20,1999'
	}, {
	//2
	question: 'Law & Order SVU was orginally named...',
	options: ['Sex Crimes & Passion', 'Another Law & Order', 'Sex Crimes', 'Law and Order Sex Crimes Unit'],
	answer: 'Sex Crimes'
	}, {
	//3
	question: 'Olivia and Elliot are named after...',
	options: ['Taylor Swifts pets', 'The creators pets', 'The creators children', 'No one in particular'],
	answer: 'The creators children'
	}, {
	//4
	question: 'Olivia Benson (played by Mariska Hargitay) keeps a photograph of her real life mother on her set desk. She is the daughter of...',
	options: ['Josephine Hargitay', 'Jayne Mansfield', 'Marie Hargitay', 'Marie Benson'],
	answer: 'Jayne Mansfield'
	}, {
	//5
	question: 'Which actor played the role of Merritt Rook on SVUs 200th episode?',
	options: ['Robin Willams', 'John Ritter', 'Bradley Cooper', 'Brad Garrett'],
	answer: 'Robin Willams'
	}, {
	//6
	question: 'Which character sets a television record for the only fictional character played by a single actor, appearing on 10 different television shows?',
	options: ['Det. Olivia Benson', 'Det. Elliot Stabler', 'Det. John Munch', 'Det. Nick Amaro'],
	answer: 'Det. John Munch'
	}, {
	//7
	question: 'Why did Chris Meloni leave SVU in real life?',
	options: ['Better contract on a new hit series', 'Couldnt reach contract aggreement', 'Soured relationship with staff', 'Decided it was time for Stabler to retire'],
	answer: 'Couldnt reach contract aggreement'
	}, {
	//8
	question: 'In 2016 what did SVU exiting showrunner, Warren Leight do for his final episode?',
	options: ['Moment of silence for law enforement', 'Brought Stabler back', 'Kill an SVU detective', 'Leight is still the showrunner'],
	answer: 'Kill an SVU detective'
	}, {
	//9
	question: 'Detective Tutuola, played by Ice T only supposed to be a part of the show for 4 episodes...why did the role expand?',
	options: ['The SVU team was lacking diversity', 'John Munch needed a partner', 'Ice T brought a unique perspective', 'Ice T asked to stay'],
	answer: 'Ice T asked to stay'
	}, {
	//10
	question: 'Which character has a partially collapsed lung after insisting on doing their own stunts?',
	options: ['Olivia Benson', 'Nick Amaro','Elliot Stabler', 'Amanda Rollins'],
	answer: 'Olivia Benson'
	}
	]

	// start # correct at 0, start the question count at 1 (skip empty 0 question)
	correctAnswers = 0;
	i = 1;

	// div for questions and radio 0-3
	function createQuizQuestions(){
	const quizQuestions = `
	<div id='quizQuestions'>
	<h3>${questions[i].question}</h3>
	<form class="form">
	<label class='answer'>
	<input type="radio" name='answerOption' value='${questions[i].options[0]}'>
	<span>${questions[i].options[0]}</span>
	</label>

	<br>

	<label class='answer'>
	<input type="radio" name='answerOption' value='${questions[i].options[1]}'>
	<span>${questions[i].options[1]}</span>
	</label>

	<br>

	<label class='answer'>
	<input type="radio" name='answerOption' value='${questions[i].options[2]}'>
	<span>${questions[i].options[2]}</span>
	</label>

	<br>

	<label class='answer'>
	<input type="radio" name='answerOption' value='${questions[i].options[3]}'>
	<span>${questions[i].options[3]}</span>
	</label>
	</form>
	<button type="submit" class="answer-button" id="js-answer">Submit Answer</button>
	<button type="submit" class="next-button" id="js-next">Next Question</button>
	<div class="results" id="js-results">
	</div>
	</div>
	`
	//check answers after submit answer clicked
	// remove the results text /update count/ go to next question
	$('.main').append(quizQuestions);
	let nothingChecked = !$('input[name=answerOption]:radio:checked').val()
	$('#js-answer').on("click", checkAnswer);
	$('#js-next').on("click", function(){
	$('#quizQuestions').remove();
	$('.check-answers').remove();
	if(i < questions.length){
	createQuizQuestions();
	createQuestionCount();

	}
	// if there's not another question go to results/ restart page
	else
	{

	createQuestionsDone();
	$('#js-restart').click(function(){
	location.reload();
	})
	}
	})
	}
	// });
	// $('#js-next').on("click", function(){
	//$('#quizQuestions').remove();
	//$('.check-answers').remove();
	//if(i < questions.length){
	//createQuizQuestions();
	//createQuestionCount();
	//}
	//else
	//{

	//createQuestionsDone();
	//$('#js-restart').click(function(){
	// location.reload();
	//})
	//}
	//})
	//}

	// after start button clicked toggle with questions and count

	$('#js-intro-submit').click(function(){
	$('#js-intro').toggle();

	//let nothingChecked = !$('input[name=answerOption]:radio:checked').val()
	//$('#js-intro').addClass('hidden');


	createQuizQuestions();
	createQuestionCount();

	})
	// count questions, show text saying which question you're on
	function createQuestionCount(){
	const questionCount = `
	<div class='change-question-number'>
	<p class='question-number-text'>Question</p>
	<br>
	<p class='question-number-number'>${i + 1}</p>
	</div>
	`
	$('#count').text('Question '+i+' of '+(questions.length-1));

	$('#questions').prepend(questionCount);


	//if (i===0) {
	//$('#js-intro-submit').show().text('Start');
	//$('#B')

	}

	// done, show results and allow restart
	function createQuestionsDone (){
	const questionsDone = `
	<div>

	<br>
	<p class='end-num'>${correctAnswers} out of ${i-1} correct.</p>
	</div>
	<button class='end-button' id='js-restart'>Restart Quiz</button>
	`
	$('.main').append(questionsDone);
	}





	//function changeButton (){
	//$('')
	// }

	// check answers and update text

	function checkAnswer(){

	let userAnswer = $('input[name=answerOption]:radio:checked').val()
	const correctBlock =
	`<div class='check-answers'>
	<h4 class="answers-text">Correct!</h4>
	</div>`

	const incorrectBlock = `
	<div class='check-answers'>
	<h4 class="answers-text">
	Sorry, <br> The correct answer is ${questions[i].answer}
	</h4>
	</div>
	`

	if(userAnswer === questions[i].answer){
	$('.results').append(correctBlock);
	correctAnswers++;
	}else{
	$('.results').append(incorrectBlock);
	}
	i++;

	}