Storybook Player HTML Pages


This HTML displays a matching exercise for students and can be embedded in the Storybook Player

User Interface

File Structure

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

index.html – Main Code


<body>
	<div id="content">
		
		<div class="questionPair">
			<div class="question">Question 1</div>
			<select id="menuQ1" class="menu">
				<option value="none">---</option>
				<option value="choice-1">Choice 1</option>
				<option value="choice-2">Choice 2</option>
				<option value="choice-3">Choice 3</option>
				<option value="choice-4">Choice 4</option>
				<option value="choice-5">Choice 5</option>
			</select>

			<div id="feedbackQ1" class="feedback">
				<img src="images/marks_question.svg">
			</div>

		</div>

		<div class="questionPair">
		<div class="question">Question 2</div>
			<select id="menuQ2" class="menu">
				<option value="none">---</option>
				<option value="choice-1">Choice 1</option>
				<option value="choice-2">Choice 2</option>
				<option value="choice-3">Choice 3</option>
				<option value="choice-4">Choice 4</option>
				<option value="choice-5">Choice 5</option>
			</select>
			<div id="feedbackQ2" class="feedback">
				<img src="images/marks_question.svg">	
			</div>
		</div>
		<div class="questionPair">
		<div class="question">Question 3</div>
			<select id="menuQ3" class="menu">
				<option value="none">---</option>
				<option value="choice-1">Choice 1</option>
				<option value="choice-2">Choice 2</option>
				<option value="choice-3">Choice 3</option>
				<option value="choice-4">Choice 4</option>
				<option value="choice-5">Choice 5</option>
			</select>
			<div id="feedbackQ3" class="feedback">
				<img src="images/marks_question.svg">
			</div>
		</div>
		<div class="questionPair">
		<div class="question">Question 4</div>
			<select id="menuQ4" class="menu">
				<option value="none">---</option>
				<option value="choice-1">Choice 1</option>
				<option value="choice-2">Choice 2</option>
				<option value="choice-3">Choice 3</option>
				<option value="choice-4">Choice 4</option>
				<option value="choice-5">Choice 5</option>
			</select>
			<div id="feedbackQ4" class="feedback">
				<img src="images/marks_question.svg">
			</div>
		</div>
		<div class="questionPair">
		<div class="question">Question 5</div>
			<select id="menuQ5" class="menu">
				<option value="none">---</option>
				<option value="choice-1">Choice 1</option>
				<option value="choice-2">Choice 2</option>
				<option value="choice-3">Choice 3</option>
				<option value="choice-4">Choice 4</option>
				<option value="choice-5">Choice 5</option>
			</select>
			<div id="feedbackQ5" class="feedback">
				<img src="images/marks_question.svg">
			</div>
		</div>
		<div class="questionPair">
		<div class="question">Question 6</div>
			<select id="menuQ6" class="menu">
				<option value="none">---</option>
				<option value="choice-1">Choice 1</option>
				<option value="choice-2">Choice 2</option>
				<option value="choice-3">Choice 3</option>
				<option value="choice-4">Choice 4</option>
				<option value="choice-5">Choice 5</option>
			</select>
			<div id="feedbackQ6" class="feedback">
				<img src="images/marks_question.svg">
			</div>
		</div>

		<div class="questionPair">
		<div class="question">Question 7</div>
			<select id="menuQ7" class="menu">
				<option value="none">---</option>
				<option value="choice-1">Choice 1</option>
				<option value="choice-2">Choice 2</option>
				<option value="choice-3">Choice 3</option>
				<option value="choice-4">Choice 4</option>
				<option value="choice-5">Choice 5</option>
			</select>
			<div id="feedbackQ7" class="feedback">
				<img src="images/marks_question.svg">
			</div>
		</div>

		<div class="checkAnswers">
			<button id="checkAnswersBtn">Check Answers</button>
		</div>

	</div>

	<script>

		document.querySelector( '#checkAnswersBtn' ).addEventListener( 'click', () => {

			const answers = ['Choice 3', 'Choice 1', 'Choice 4', 'Choice 5', 'Choice 1', 'Choice 2', 'Choice 5'];

			document.querySelectorAll( '.menu' ).forEach( (menu, index) => {

				if ( menu.value == answers[index] ) {
					document.querySelector( '#feedbackQ' + ( index + 1 ) ).innerHTML="<img src=\"images/marks_correct.svg\">";
				} else {
					document.querySelector( '#feedbackQ' + ( index + 1 ) ).innerHTML="<img src=\"images/marks_incorrect.svg\">";
				}

			} );

		} );
	</script>

</body>



  • div class="question" – The question or statement
  • option value="choice-#" – Choice


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.


Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven’t heard of them accusamus labore sustainable VHS.

Published on March 04, 2021 at 9:42:41 am CST. Last modified on March 15, 2021 at 9:44:41 am CDT.