Skip to content

Commit 3fa1755

Browse files
thinkDevDMthinkDevDM
committed
new commit
1 parent 689d68f commit 3fa1755

File tree

4 files changed

+172
-0
lines changed

4 files changed

+172
-0
lines changed

‎css/style.css

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
body {
2+
background: #FAF625;
3+
color: #FCFCFC;
4+
font-family: arial, sans-serif;
5+
font-size: 14px;
6+
}
7+
8+
#container {
9+
width: 60%;
10+
background: #FA5119;
11+
margin: 20px auto;
12+
overflow: auto;
13+
padding: 1.5%;
14+
}
15+
16+
header {
17+
text-align: center;
18+
border-bottom: #fff dashed 1px;
19+
}
20+
21+
header h1 {
22+
margin: 0;
23+
padding-top: 5px;
24+
}
25+
26+
header p {
27+
padding: 0;
28+
margin-top: 5px;
29+
color: #FAF625;
30+
}
31+
32+
#js-logo {
33+
max-width: 100px;
34+
}
35+
36+
section {
37+
min-height: 400px;
38+
}
39+
40+
footer {
41+
border-top: #fff dashed 1px;
42+
margin-top: 20px;
43+
text-align: center;
44+
}
45+
46+
input[type="submit"] {
47+
background: #FAF625;
48+
border: 0;
49+
color: #1F36E0;
50+
padding: 10px 15px;
51+
font-weight: bold;
52+
cursor: pointer;
53+
}
54+
55+
#results h3 {
56+
background: #FAF625;
57+
padding: 10px;
58+
margin: 10px 0;
59+
color: #1F36E0;
60+
text-align: center;
61+
}
62+
63+
#results span {
64+
color: #000;
65+
font-weight: bold;
66+
}

‎index.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Simple JS Quiz</title>
7+
<link rel="stylesheet" href="css/style.css">
8+
<script src="js/script.js"></script>
9+
10+
</head>
11+
12+
<body>
13+
14+
<div id="container">
15+
16+
<header>
17+
<img id="js-logo" src="js_blue.png" alt="JavaScript Logo by seoexpresso.com" />
18+
<h1>Simple JavaScript Quiz</h1>
19+
<p>Test your knowledge in <strong>JavaScript fundamentals</strong>.</p>
20+
</header>
21+
22+
<section>
23+
24+
<form name="quiz-form" onsubmit="return submitAnswers()">
25+
<h3>1. In which HTML element do we put in JavaScript code?</h3>
26+
<input type="radio" name="q1" value="a" id="q1a">a. &lt;js&gt;<br>
27+
<input type="radio" name="q1" value="b" id="q1b">b. &lt;script&gt;<br>
28+
<input type="radio" name="q1" value="c" id="q1c">c. &lt;body&gt;<br>
29+
<input type="radio" name="q1" value="d" id="q1d">d. &lt;link&gt;<br>
30+
31+
<h3>2. Which HTML attribute is used to reference an external JavaScript file?</h3>
32+
<input type="radio" name="q2" value="a" id="q2a">a. src<br>
33+
<input type="radio" name="q2" value="b" id="q2b">b. rel<br>
34+
<input type="radio" name="q2" value="c" id="q2c">c. type<br>
35+
<input type="radio" name="q2" value="d" id="q2d">d. href<br>
36+
37+
<h3>3. How would you write "Hello" in an alert box?</h3>
38+
<input type="radio" name="q3" value="a" id="q3a">a. msg("Hello");<br>
39+
<input type="radio" name="q3" value="b" id="q3b">b. alertBox("Hello");<br>
40+
<input type="radio" name="q3" value="c" id="q3c">c. document.write("Hello");<br>
41+
<input type="radio" name="q3" value="d" id="q3d">d. alert("Hello");<br>
42+
43+
<h3>4. JavaScript is directly related to the "Java" programming language.</h3>
44+
<input type="radio" name="q4" value="a" id="q4a">a. True<br>
45+
<input type="radio" name="q4" value="b" id="q4b">b. False<br>
46+
47+
<h3>5. A variable in JavaScript must start with which special character?</h3>
48+
<input type="radio" name="q5" value="a" id="q5a">a. @<br>
49+
<input type="radio" name="q5" value="b" id="q5b">b. $<br>
50+
<input type="radio" name="q5" value="c" id="q5c">c. #<br>
51+
<input type="radio" name="q5" value="d" id="q5d">d. No special character<br>
52+
<br>
53+
<br>
54+
55+
<input type="submit" value="Submit Answers">
56+
57+
<div id="results"></div>
58+
59+
</form>
60+
61+
</section><!-- end of main section -->
62+
63+
<footer>
64+
<p>A portfolio project by Drew Mery through the <em>Eduonix Learning</em> course, "Projects in JavaScript & jQuery".</p>
65+
</footer>
66+
67+
</div><!-- end of container -->
68+
69+
</body>
70+
</html>

‎js/script.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
function submitAnswers() {
2+
var total = 5;
3+
var score = 0;
4+
5+
//Get User Input
6+
var q1 = document.forms["quiz-form"]["q1"].value;
7+
var q2 = document.forms["quiz-form"]["q2"].value;
8+
var q3 = document.forms["quiz-form"]["q3"].value;
9+
var q4 = document.forms["quiz-form"]["q4"].value;
10+
var q5 = document.forms["quiz-form"]["q5"].value;
11+
12+
//Validation
13+
for (var i = 1; i <= total; i++) {
14+
if (eval("q"+i) == null || eval("q"+i) == "") {
15+
alert("You missed question " + i);
16+
return false;
17+
}
18+
}
19+
20+
//Set Correct Answers
21+
var answers = ["b", "a", "d", "b", "d"];
22+
23+
//Check Answers
24+
for (var i = 1; i <= total; i++) {
25+
if (eval("q"+i) == answers[i - 1]) {
26+
score++;
27+
}
28+
}
29+
30+
//Display Results
31+
var results = document.getElementById("results");
32+
results.innerHTML = "<h3>You scored <span>" + score + "</span> out of <span>" + total + "</span>.</h3>"
33+
alert("You scored " + score + " out of " + total + ".");
34+
35+
return false;
36+
}

‎js_blue.png

27.8 KB
Loading

0 commit comments

Comments
 (0)