Input Answer and View Results
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 - 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(); }
};
Developer | Raquel Lorenzana |
Username | raquellorenzana |
Uploaded | January 20, 2023 |
Rating | 3 |
Size | 3,061 Kb |
Views | 4,048 |
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!
Name | Size |
JS Form | 5,730 Kb |
HTML and CSS | 6,300 Kb |
API Search App | 4,133 Kb |
Material Design | 2,920 Kb |
A Pen by Raquel Lorenzana | 7,002 Kb |
Banner Ad | 4,172 Kb |
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!
Name | Username | Size |
Banner Ad | Raquellorenzana | 4,172 Kb |
Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
CSS3 Animated buttons | Cguillou | 3,737 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Weather App | OmranAbazid | 2,596 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
Personal Website Redesign v2.0 | DevItWithDavid | 5,168 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!