Skip to content

Instantly share code, notes, and snippets.

@danmaina

danmaina/index.html

Created June 10, 2017 19:23
Show Gist options
  • Save danmaina/929dd10e87933d05f8551723c3bd9912 to your computer and use it in GitHub Desktop.
Save danmaina/929dd10e87933d05f8551723c3bd9912 to your computer and use it in GitHub Desktop.
Download ZIP
html css javascript Practice. Dependent on jquery
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simpe Quiz</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body id="container">
<h1 class="page-title">Simple javascript Quiz</h1>
<section>
<div>
<form name="quizForm">
<h3 class="question">1. In Which HTML element do we put in javascript Code?</h3>
<h4 id="q1Error" class="error"></h4>
<input class="answer" type="radio" name="q1" value="a" id="q1a">a. &lt;js&gt;<br>
<input class="answer" type="radio" name="q1" value="b" id="q1b">b. &lt;script&gt;<br>
<input class="answer" type="radio" name="q1" value="c" id="q1c">c. &lt;body&gt;<br>
<input class="answer" type="radio" name="q1" value="d" id="q1d">d. &lt;link&gt;<br>
<h3 class="question">2. Which html attribute is used to reference an external Javascript File?</h3>
<h4 id="q2Error" class="error"></h4>
<input class="answer" type="radio" name="q2" value="a" id="q2a">a. src<br>
<input class="answer" type="radio" name="q2" value="b" id="q2b">b. rel<br>
<input class="answer" type="radio" name="q2" value="c" id="q2c">c. type<br>
<input class="answer" type="radio" name="q2" value="d" id="q2d">d. href<br>
<h3 class="question">3. How would you write "Hello" in an alert box?</h3>
<h4 id="q3Error" class="error"></h4>
<input class="answer" type="radio" name="q3" value="a" id="q3a">a. msg("Hello");<br>
<input class="answer" type="radio" name="q3" value="b" id="q3b">b. alertBox("Hello");<br>
<input class="answer" type="radio" name="q3" value="c" id="q3c">c. document.write("Hello");<br>
<input class="answer" type="radio" name="q3" value="d" id="q3d">d. alert("Hello");<br>
<h3 class="question">4. Javascript is directly related to "Java" programming language</h3>
<h4 id="q4Error" class="error"></h4>
<input class="answer" type="radio" name="q4" value="a" id="q4a">a. true<br>
<input class="answer" type="radio" name="q4" value="b" id="q4b">b. false<br>
<h3 class="question">5. A variable in Javascript must start with which special character</h3>
<h4 id="q5Error" class="error"></h4>
<input class="answer" type="radio" name="q5" value="a" id="q5a">a. @<br>
<input class="answer" type="radio" name="q5" value="b" id="q5b">b. $<br>
<input class="answer" type="radio" name="q5" value="c" id="q5c">c. #<br>
<input class="answer" type="radio" name="q5" value="d" id="q5d">d. No Special Character<br>
<button class="submit" onclick="return submitAnswers()">Submit Answers</button>
<button class="retry" onclick="return retry()">Try Again</button>
</form>
</div>
<div class="results">
<h4 id="results"></h4>
</div>
</section>
<footer>
<p>Copyright &copy; Spectrum Gradient 2017 </p>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Raw
main.css
/*Tags*/
html{
background-color: #151515;
color: #41c7f4;
}
h1{
text-align: center;
font-style: oblique;
}
h3{
font-style: italic;
}
section{
border: solid 2px #ffffff;
border-radius: 5px;
background-color: #404040;
padding: 10px;
margin: 10px auto;
width: 70%;
}
footer{
background-color: #000000;
color: white;
margin: 10px auto;
padding: 10px;
text-align: right;
}
button{
border: solid 2px #aa3ac9;
background-color: inherit;
color: white;
margin: 10px auto;
padding: 10px;
text-align: center;
}
/*Classes*/
.page-title{
border: solid 5px #000000;
margin: 10px auto;
width: 70%;
padding: 10px;
background-color: #c141f4;
color: #ffffff;
border-radius: 10px;
}
.question{
border-bottom: solid 5px #000000;
border-radius: 5px;
padding: 7px;
color: #ffffff;
}
.answer{
margin-left: 50px;
}
.submit{
display: inline-block;
border: solid 2px #aa3ac9;
background-color: inherit;
color: white;
margin: 10px auto;
margin-left: 50px;
margin-top: 30px;
padding: 10px;
text-align: center;
cursor: pointer;
}
.results{
padding: 10px;
margin: 10px;
border: solid 2px #ffffff;
border-radius: 5px;
display: block;
}
.error{
background-color: #f44289;
color: white;
margin: 10px;
padding: 10px;
display: none;
}
.retry{
display: inline-block;
cursor: pointer;
margin-left: 50px;
}
/*ids*/
#results{
background-color: #404040;
margin: 10px auto;
padding: 10px;
width: 70%;
color: white;
display: block;
}
Raw
main.js
function submitAnswers(){
var total = 5;
var score = 0;
// Get User Inpute
var q1 = document.forms["quizForm"]["q1"].value;
var q2 = document.forms["quizForm"]["q2"].value;
var q3 = document.forms["quizForm"]["q3"].value;
var q4 = document.forms["quizForm"]["q4"].value;
var q5 = document.forms["quizForm"]["q5"].value;
// Validation
for(i = 1; i <= total; ++i){
if(eval('q'+i) == null || eval('q'+i) == '' ){
document.getElementById('q'+i+'Error').textContent = "You Did Not Answer Question " + i;
document.getElementById('q'+i+'Error').style.display = 'block';
return false;
}else if (eval('q'+i) != null || eval('q'+i) != '' ) {
document.getElementById('q'+i+'Error').style.display = 'none';
}
}
// Set Correct Answers
var answers = ["b", "a", "d", "b", "d"];
var gradeColors = ["#f46841", "#f46841", "#f49e42", "#eef441", "#cdf441", "#91f441"];
// Check the Answers
for(i = 1; i <= total; i++){
if(eval('q'+i) == answers[i - 1]){
score++;
}
}
// Display Answers
$('.results').css('border', '2px solid ' + gradeColors[score]);
$('#results').css('background-color', gradeColors[score]);
$('#results').text("Your Score Is: " + score + ' / ' +total);
return false;
}
function retry(){
location.reload();
}
@danmaina
Copy link
Author

danmaina commented Jun 10, 2017 •
edited
Loading

jquery Needed
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment