Skip to content

Commit 8f45d26

Browse files
jnxtechjnxtech
authoredMay 17, 2023
Add files via upload
0 parents  commit 8f45d26

File tree

6 files changed

+197
-0
lines changed

6 files changed

+197
-0
lines changed
 

‎bootstrap.min.css

+12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎grade.php

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<?php
2+
$score = 0;
3+
$total = 0;
4+
5+
foreach ($_POST as $question => $answer) {
6+
$total++;
7+
$score += $answer;
8+
}
9+
10+
header("Location: results.php?score=$score&total=$total");

‎index.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Quiz</title>
5+
<link rel="stylesheet" href="bootstrap.min.css">
6+
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
7+
<style>
8+
body {
9+
background: #0d0d0d;
10+
font-family: 'Orbitron', sans-serif;
11+
}
12+
.container {
13+
background: #1b1b1b;
14+
border-radius: 15px;
15+
padding: 30px;
16+
max-width: 800px;
17+
margin: 30px auto;
18+
box-shadow: 0px 0px 20px #ff4081;
19+
color: #f5f5f5;
20+
}
21+
h1 {
22+
color: #ff4081;
23+
text-align: center;
24+
margin-bottom: 30px;
25+
font-weight: 500;
26+
}
27+
.btn-primary {
28+
background: #ff4081;
29+
border-color: #ff4081;
30+
}
31+
.btn-primary:hover {
32+
background: #f50057;
33+
border-color: #f50057;
34+
}
35+
</style>
36+
</head>
37+
<body>
38+
<div class="container">
39+
<h1>Quiz</h1>
40+
<form action="grade.php" method="post" id="quiz" class="needs-validation" novalidate>
41+
<div id="quiz-content">
42+
<!-- Quiz questions will be populated here by JavaScript -->
43+
</div>
44+
<input type="submit" class="btn btn-primary btn-lg btn-block" value="Submit Quiz" />
45+
</form>
46+
</div>
47+
<script src="quiz.js"></script>
48+
<script>
49+
// Bootstrap validation script
50+
(function () {
51+
'use strict'
52+
var forms = document.querySelectorAll('.needs-validation')
53+
Array.from(forms)
54+
.forEach(function (form) {
55+
form.addEventListener('submit', function (event) {
56+
if (!form.checkValidity()) {
57+
event.preventDefault()
58+
event.stopPropagation()
59+
}
60+
form.classList.add('was-validated')
61+
}, false)
62+
})
63+
})()
64+
</script>
65+
</body>
66+
</html>

‎quiz.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// Fetch quiz questions from API
2+
fetch('https://opentdb.com/api.php?amount=10&type=multiple')
3+
.then(response => response.json())
4+
.then(data => {
5+
// Get quiz container
6+
const quizContent = document.getElementById('quiz-content');
7+
8+
// Loop over questions
9+
data.results.forEach((question, index) => {
10+
// Create a div for the question
11+
const questionDiv = document.createElement('div');
12+
questionDiv.className = 'mb-4';
13+
14+
// Create the question label
15+
const questionLabel = document.createElement('label');
16+
questionLabel.innerHTML = question.question;
17+
questionLabel.className = 'd-block mb-2';
18+
questionDiv.appendChild(questionLabel);
19+
20+
// Shuffle answers
21+
const answers = question.incorrect_answers;
22+
const correctAnswerIndex = Math.floor(Math.random() * (answers.length + 1));
23+
answers.splice(correctAnswerIndex, 0, question.correct_answer);
24+
25+
// Loop over answers
26+
answers.forEach(answer => {
27+
// Create the answer input and label
28+
const answerInput = document.createElement('input');
29+
answerInput.type = 'radio';
30+
answerInput.name = `question${index}`;
31+
answerInput.value = answer === question.correct_answer ? 1 : 0;
32+
answerInput.className = 'mr-2';
33+
const answerLabel = document.createElement('label');
34+
answerLabel.appendChild(answerInput);
35+
answerLabel.innerHTML += answer;
36+
37+
// Add the answer to the question div
38+
questionDiv.appendChild(answerLabel);
39+
questionDiv.appendChild(document.createElement('br'));
40+
});
41+
42+
// Add the question div to the quiz content
43+
quizContent.appendChild(questionDiv);
44+
});
45+
})
46+
.catch(error => console.error(error));

‎quiz.php

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<?php
2+
3+
$quiz = [
4+
[
5+
"question" => "What is the capital of France?",
6+
"choices" => ["Paris", "London", "Rome"],
7+
"answer" => "Paris"
8+
],
9+
[
10+
"question" => "What is 2+2?",
11+
"choices" => ["3", "4", "5"],
12+
"answer" => "4"
13+
],
14+
// Add more questions as needed
15+
];
16+
17+
header('Content-Type: application/json');
18+
echo json_encode($quiz);
19+
20+
?>

‎results.php

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Quiz Results</title>
5+
<link rel="stylesheet" href="bootstrap.min.css">
6+
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
7+
<style>
8+
body {
9+
background: #0d0d0d;
10+
font-family: 'Orbitron', sans-serif;
11+
}
12+
.container {
13+
background: #1b1b1b;
14+
border-radius: 15px;
15+
padding: 30px;
16+
max-width: 800px;
17+
margin: 30px auto;
18+
box-shadow: 0px 0px 20px #ff4081;
19+
color: #f5f5f5;
20+
}
21+
h1 {
22+
color: #ff4081;
23+
text-align: center;
24+
margin-bottom: 30px;
25+
font-weight: 500;
26+
}
27+
a {
28+
color: #ff4081;
29+
text-decoration: none;
30+
}
31+
a:hover {
32+
color: #f50057;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<div class="container">
38+
<h1>Quiz Results</h1>
39+
<p>You scored <?= $_GET['score'] ?> out of <?= $_GET['total'] ?></p>
40+
<a href="index.html" class="btn btn-primary">Take the quiz again</a>
41+
</div>
42+
</body>
43+
</html>

0 commit comments

Comments
 (0)