Input Answer and View Results

Size
3,061 Kb
Views
4,048

How do I make an input answer and view results?

What is a input answer and view results? How do you make a input answer and view results? This script and codes were developed by Raquel Lorenzana on 20 January 2023, Friday.

Input Answer and View Results Previews

Input Answer and View Results - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Input Answer and View Results</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header id="top">	<h2 class="title">SF Questions</h2>
</header>	<!-- <div class="row"> -->
<div class="container">	<form class="col-sm-8 col-sm-offset-2"> <div class="form-group"> <p id="question0"></p> <input id="answer0" type="text" class="form-control"> </div> <div class="form-group"> <p id="question1"></p> <input id="answer1" type="text" class="form-control"> </div class="form-group"> <div> <p id="question2"></p> <input id="answer2" type="text" class="form-control"> </div> <div class="form-group"> <p id="question3"></p> <input id="answer3" type="text" class="form-control"> </div> <div> <p id="question4"></p> <input id="answer4" type="text" class="form-control"> </div> <div> <p id="question5"></p> <input id="answer5" type="text" class="form-control"> </div> <div> <p id="question6"></p> <input id="answer6" type="text" class="form-control"> </div> <div> <p id="question7"></p> <input id="answer7" type="text" class="form-control"> </div> <div> <p id="question8"></p> <input id="answer8" type="text" class="form-control"> </div> <div> <p id="question9"></p> <input id="answer9" type="text" class="form-control"> </div>	<button type="button" onclick="testResults()" class="b btn btn-primary btn-lg">See Results</button>	<h1 class="correct">Correct: <span id="correct"></span></h1>	<h1 class="incorrect">Incorrect: <span id="incorrect"></span></h1>	<button class="b btn btn-primary btn-lg"><a href="#top">Try Again!</a></button>	</form>	</div> <script src="js/index.js"></script>
</body>
</html>

Input Answer and View Results - Script Codes CSS Codes

@font-face { font-family: TypeKeys; src: url(../font/type_keys/TypeKeys.ttf);
}
@font-face {	font-family: OldNewspaperTypes;	src: url(../font/OldNewspaperTypes.ttf);
}
body {	background-image: url(http://www.devraq.com/questionnaire/img/sf_skyview.jpg);	background-repeat: no-repeat;	background-size: 100% 100%;	padding-bottom: 20%;
}
h2.title {	font-family: TypeKeys;	color: #066;	width: 90%;	margin: 0 auto;	text-align: center;	font-size: 4em;	margin-top: 2%;	margin-bottom: 5%;
}
form p {	font-family: OldNewspaperTypes;	letter-spacing: .2em;	color: #000;	font-size: 24px;	text-shadow: 1px 1px #ccc;
}
input.form-control {	width: 90%;	border: 3px solid #ccc;
}
.correct {	color: #00b3b3;	border-top: 3px dashed #000;
}
.incorrect {	color: #f00;
}
h1.correct, h1.incorrect {	font-family: OldNewspaperTypes;	letter-spacing: .3em;	text-shadow: 2px 2px #000;	padding: 5px;
}
button.btn {	font-family: OldNewspaperTypes;	background-color: #066;	box-shadow: 3px 3px rgba(128,128,128,0.8);	text-decoration: none;	color: #fff;	letter-spacing: .2em;	margin: 5% 0;	border: none;
}
button.btn:hover {	background-color: #00b3b3;
}
button a {	text-decoration: none;	color: #fff;	letter-spacing: .2em;
}
@media (max-width: 840px) {	h2.title {font-size: 3em;	}
}

Input Answer and View Results - Script Codes JS Codes

var randomQuestions = [	{	question: "1. Where did I leave my heart?",	answer: "San Francisco"	},	{	question: "2. Who won the World Series in 2010, 2012, and 2014?",	answer: "The San Francisco Giants"	},	{	question: "3. What month is the hottest in San Francisco?",	answer: "October"	},	{	question: "4. What color is the Golden Gate Bridge?",	answer: "Red"	},	{	question: "5. How big is San Francisco?",	answer: "7 miles squared"	},	{	question: "6. Who is the mayor of San Francisco?",	answer: "Ed Lee"	},	{	question: "7. What is the tallest building in San Francisco?",	answer: "Trans America building"	},	{	question: "8. Where is the highest elevation in San Francisco?",	answer: "Twin Peaks"	},	{	question: "9. What is the name of the biggest park in San Francisco?",	answer: "Golden Gate Park"	},	{	question: "10. Who is Karl?",	answer: "The Fog"	}
]
for(i = 0; i < randomQuestions.length; i++) {	q = randomQuestions[i].question	document.getElementById('question' + [i]).textContent = q
}
function testResults() {	var correct = 0;	var incorrect = 0;	for(i = 0; i < randomQuestions.length; i++) {	var answer = randomQuestions[i].answer	var guess = document.getElementById('answer' + [i]).value	var questionSpot = document.getElementById('question' + [i])	if(answer == guess) {	questionSpot.className = 'correct'	correct++	} else {	questionSpot.className = 'incorrect'	incorrect++	}	}	document.getElementById('correct').textContent = correct	document.getElementById('incorrect').textContent = incorrect
}
document.onkeydown = function(e){ if(e.keyCode == 13){	e.preventDefault();	testResults(); }
};
Input Answer and View Results - Script Codes
Input Answer and View Results - Script Codes
Home Page Home
Developer Raquel Lorenzana
Username raquellorenzana
Uploaded January 20, 2023
Rating 3
Size 3,061 Kb
Views 4,048
Do you need developer help for Input Answer and View Results?

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!

Raquel Lorenzana (raquellorenzana) Script Codes
Create amazing blog posts 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!