Simple JavaScript Quiz

Developer
Yaphi
Size
2,708 Kb
Views
62,744
  1. Simple JavaScript Quiz Previews
  2. Simple JavaScript Quiz HTML Codes
  3. Simple JavaScript Quiz CSS Codes
  4. Simple JavaScript Quiz JS Codes

How do I make an simple javascript quiz?

What is a simple javascript quiz? How do you make a simple javascript quiz? This script and codes were developed by Yaphi on 11 August 2022, Thursday.

Simple JavaScript Quiz Previews
IQ Test

Simple JavaScript Quiz - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple JavaScript Quiz</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="quiz"></div>
<button id="submit">Get Results</button>
<div id="results"></div>
<a href="https://simplestepscode.com/javascript-quiz-tutorial/" target="_blank">Click here for the JavaScript quiz tutorial (in case you're on CodePen)</a> <script src="js/index.js"></script>
</body>
</html>

Simple JavaScript Quiz - Script Codes CSS Codes

body{	font-size: 20px;	font-family: sans-serif;	color: #333;
}
.question{	font-weight: 600;
}
.answers { margin-bottom: 20px;
}
#submit{	font-family: sans-serif;	font-size: 20px;	background-color: #297;	color: #fff;	border: 0px;	border-radius: 3px;	padding: 20px;	cursor: pointer;	margin-bottom: 20px;
}
#submit:hover{	background-color: #3a8;
}

Simple JavaScript Quiz - Script Codes JS Codes

var myQuestions = [	{	question: "What is 10/2?",	answers: {	a: '3',	b: '5',	c: '115'	},	correctAnswer: 'b'	},	{	question: "What is 30/3?",	answers: {	a: '3',	b: '5',	c: '10'	},	correctAnswer: 'c'	}
];
var quizContainer = document.getElementById('quiz');
var resultsContainer = document.getElementById('results');
var submitButton = document.getElementById('submit');
generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton);
function generateQuiz(questions, quizContainer, resultsContainer, submitButton){	function showQuestions(questions, quizContainer){	// we'll need a place to store the output and the answer choices	var output = [];	var answers;	// for each question...	for(var i=0; i<questions.length; i++){	// first reset the list of answers	answers = [];	// for each available answer...	for(letter in questions[i].answers){	// ...add an html radio button	answers.push(	'<label>'	+ '<input type="radio" name="question'+i+'" value="'+letter+'">'	+ letter + ': '	+ questions[i].answers[letter]	+ '</label>'	);	}	// add this question and its answers to the output	output.push(	'<div class="question">' + questions[i].question + '</div>'	+ '<div class="answers">' + answers.join('') + '</div>'	);	}	// finally combine our output list into one string of html and put it on the page	quizContainer.innerHTML = output.join('');	}	function showResults(questions, quizContainer, resultsContainer){	// gather answer containers from our quiz	var answerContainers = quizContainer.querySelectorAll('.answers');	// keep track of user's answers	var userAnswer = '';	var numCorrect = 0;	// for each question...	for(var i=0; i<questions.length; i++){	// find selected answer	userAnswer = (answerContainers[i].querySelector('input[name=question'+i+']:checked')||{}).value;	// if answer is correct	if(userAnswer===questions[i].correctAnswer){	// add to the number of correct answers	numCorrect++;	// color the answers green	answerContainers[i].style.color = 'lightgreen';	}	// if answer is wrong or blank	else{	// color the answers red	answerContainers[i].style.color = 'red';	}	}	// show number of correct answers out of total	resultsContainer.innerHTML = numCorrect + ' out of ' + questions.length;	}	// show questions right away	showQuestions(questions, quizContainer);	// on submit, show results	submitButton.onclick = function(){	showResults(questions, quizContainer, resultsContainer);	}
}
Simple JavaScript Quiz - Script Codes
Simple JavaScript Quiz - Script Codes
Home Page Home
Developer Yaphi
Username yaphi1
Uploaded August 11, 2022
Rating 3
Size 2,708 Kb
Views 62,744
Do you need developer help for Simple JavaScript Quiz?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yaphi (yaphi1) Script Codes
Name
Scheduled JavaScript Countdown Clock
Styled JavaScript Countdown Clock
Quickipedia - Instant Wikipedia Summaries
JavaScript Slideshow With Controls
Handmade SVG Icons
Countdown Clock with Pause and Resume
Updated JavaScript Countdown Clock
10 Minute Countdown Clock
JavaScript Slideshow With Pause Button
Turn HTML into JS string
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!