Skip to content

Commit 9c513e6

Browse files
LoneWolf2010LoneWolf2010
authored
Add files via upload
0 parents  commit 9c513e6

File tree

5 files changed

+178
-0
lines changed

5 files changed

+178
-0
lines changed

‎index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Quiz Website</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="video-container">
11+
<!-- Embed the YouTube video using an iframe -->
12+
<iframe width="560" height="315" src="https://youtu.be/p0Lm0xWaKkw" frameborder="0" allowfullscreen></iframe>
13+
</div>
14+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2150529875627207"
15+
crossorigin="anonymous"></script>
16+
<button id="start-quiz">Start Quiz</button>
17+
18+
<div class="quiz-container" style="display: none;">
19+
<!-- Quiz content goes here -->
20+
<h1>Quiz Time!</h1>
21+
<div id="question"></div>
22+
<div id="options"></div>
23+
<button id="submit">Submit</button>
24+
<div id="result"></div>
25+
</div>
26+
27+
<!-- Include the questions.js script before script.js -->
28+
<script src="questions.js"></script>
29+
<script src="script.js"></script>
30+
</body>
31+
</html>
32+

‎questions.csv

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
Question,Option 1,Option 2,Option 3,Option 4,Correct Answer Index
2+
Which of the following best describes 'Neerakshi'?,Autonomous underwater vehicle,Water purification system DRDO,Drip Irrigation System by ICAR,Drought resistant rice,0

‎questions.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎script.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
const questionElement = document.getElementById('question');
2+
const optionsElement = document.getElementById('options');
3+
const submitButton = document.getElementById('submit');
4+
const resultElement = document.getElementById('result');
5+
const startQuizButton = document.getElementById('start-quiz'); // Added for the YouTube interaction
6+
7+
let currentQuestion = 0;
8+
let score = 0;
9+
10+
function displayQuestion() {
11+
questionElement.textContent = questions[currentQuestion].question;
12+
13+
optionsElement.innerHTML = '';
14+
for (let i = 0; i < questions[currentQuestion].options.length; i++) {
15+
const option = document.createElement('button');
16+
option.textContent = questions[currentQuestion].options[i];
17+
option.addEventListener('click', () => checkAnswer(i));
18+
optionsElement.appendChild(option);
19+
}
20+
}
21+
22+
function checkAnswer(selectedIndex) {
23+
questions[currentQuestion].userAnswerIndex = selectedIndex;
24+
25+
if (selectedIndex === questions[currentQuestion].correctAnswer) {
26+
score++;
27+
}
28+
currentQuestion++;
29+
30+
if (currentQuestion < questions.length) {
31+
displayQuestion();
32+
} else {
33+
showResult();
34+
}
35+
}
36+
37+
function showResult() {
38+
questionElement.style.display = 'none';
39+
optionsElement.style.display = 'none';
40+
submitButton.style.display = 'none';
41+
42+
let resultHTML = `You scored ${score} out of ${questions.length}!<br><br>`;
43+
resultHTML += '<strong>Questions and Answers:</strong><br><br>';
44+
45+
for (let i = 0; i < questions.length; i++) {
46+
const userAnswer = questions[i].options[questions[i].userAnswerIndex];
47+
const correctAnswer = questions[i].options[questions[i].correctAnswer];
48+
49+
resultHTML += `<p><strong>Question ${i + 1}:</strong> ${questions[i].question}</p>`;
50+
resultHTML += `<p>Your Answer: ${userAnswer}</p>`;
51+
resultHTML += `<p>Correct Answer: ${correctAnswer}</p><br>`;
52+
}
53+
54+
resultElement.innerHTML = resultHTML;
55+
}
56+
57+
// Function to start quiz after watching YouTube video
58+
function startQuizAfterVideo() {
59+
const videoContainer = document.querySelector('.video-container');
60+
const quizContainer = document.querySelector('.quiz-container');
61+
62+
videoContainer.style.display = 'none';
63+
quizContainer.style.display = 'block';
64+
65+
displayQuestion(); // Start the quiz
66+
}
67+
68+
// Load questions from external file and start the quiz
69+
function loadQuestions() {
70+
const script = document.createElement('script');
71+
script.src = 'questions.js';
72+
script.onload = () => {
73+
// Start the quiz after loading questions
74+
startQuizButton.addEventListener('click', startQuizAfterVideo);
75+
};
76+
document.body.appendChild(script);
77+
}
78+
79+
// Start loading questions when the page is ready
80+
document.addEventListener('DOMContentLoaded', loadQuestions);
81+

‎styles.css

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/* Apply styles to the user info container */
2+
.user-info-container {
3+
text-align: center;
4+
padding: 20px;
5+
background-color: #f5f5f5;
6+
}
7+
8+
/* Apply styles to the quiz container */
9+
.quiz-container {
10+
text-align: left; /* Align content to the left */
11+
padding: 20px;
12+
background-color: #ffffff;
13+
}
14+
15+
/* Style quiz question */
16+
#question {
17+
font-size: 24px;
18+
margin-bottom: 20px;
19+
}
20+
21+
/* Style quiz options */
22+
#options {
23+
display: flex;
24+
flex-direction: column;
25+
align-items: flex-start; /* Align options to the left */
26+
}
27+
28+
/* Style quiz option buttons */
29+
.option {
30+
margin: 10px 0; /* Add spacing between options */
31+
padding: 10px 20px;
32+
font-size: 16px;
33+
background-color: #f0f0f0;
34+
border: 1px solid #ccc;
35+
cursor: pointer;
36+
}
37+
38+
.option:hover {
39+
background-color: #e0e0e0;
40+
}
41+
42+
/* Style submit button */
43+
#submit {
44+
margin-top: 10px;
45+
padding: 10px 20px;
46+
font-size: 18px;
47+
background-color: #007bff;
48+
color: #ffffff;
49+
border: none;
50+
cursor: pointer;
51+
}
52+
53+
#submit:hover {
54+
background-color: #0056b3;
55+
}
56+
57+
/* Style result section */
58+
#result {
59+
font-size: 18px;
60+
margin-top: 20px;
61+
}
62+

0 commit comments

Comments
 (0)