Add files via upload

LoneWolf2010 · Aug 8, 2023 · 9c513e6 · 9c513e6
commit 9c513e6
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Quiz Website</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="video-container">
+        <!-- Embed the YouTube video using an iframe -->
+        <iframe width="560" height="315" src="https://youtu.be/p0Lm0xWaKkw" frameborder="0" allowfullscreen></iframe>
+    </div>
+    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2150529875627207"
+     crossorigin="anonymous"></script>
+    <button id="start-quiz">Start Quiz</button>
+
+    <div class="quiz-container" style="display: none;">
+        <!-- Quiz content goes here -->
+        <h1>Quiz Time!</h1>
+        <div id="question"></div>
+        <div id="options"></div>
+        <button id="submit">Submit</button>
+        <div id="result"></div>
+    </div>
+
+    <!-- Include the questions.js script before script.js -->
+    <script src="questions.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
+
diff --git a/questions.csv b/questions.csv
@@ -0,0 +1,2 @@
+Question,Option 1,Option 2,Option 3,Option 4,Correct Answer Index
+Which of the following best describes 'Neerakshi'?,Autonomous underwater vehicle,Water purification system DRDO,Drip Irrigation System by ICAR,Drought resistant rice,0
diff --git a/questions.js b/questions.js
diff --git a/script.js b/script.js
@@ -0,0 +1,81 @@
+const questionElement = document.getElementById('question');
+const optionsElement = document.getElementById('options');
+const submitButton = document.getElementById('submit');
+const resultElement = document.getElementById('result');
+const startQuizButton = document.getElementById('start-quiz'); // Added for the YouTube interaction
+
+let currentQuestion = 0;
+let score = 0;
+
+function displayQuestion() {
+    questionElement.textContent = questions[currentQuestion].question;
+
+    optionsElement.innerHTML = '';
+    for (let i = 0; i < questions[currentQuestion].options.length; i++) {
+        const option = document.createElement('button');
+        option.textContent = questions[currentQuestion].options[i];
+        option.addEventListener('click', () => checkAnswer(i));
+        optionsElement.appendChild(option);
+    }
+}
+
+function checkAnswer(selectedIndex) {
+    questions[currentQuestion].userAnswerIndex = selectedIndex;
+
+    if (selectedIndex === questions[currentQuestion].correctAnswer) {
+        score++;
+    }
+    currentQuestion++;
+
+    if (currentQuestion < questions.length) {
+        displayQuestion();
+    } else {
+        showResult();
+    }
+}
+
+function showResult() {
+    questionElement.style.display = 'none';
+    optionsElement.style.display = 'none';
+    submitButton.style.display = 'none';
+
+    let resultHTML = `You scored ${score} out of ${questions.length}!<br><br>`;
+    resultHTML += '<strong>Questions and Answers:</strong><br><br>';
+
+    for (let i = 0; i < questions.length; i++) {
+        const userAnswer = questions[i].options[questions[i].userAnswerIndex];
+        const correctAnswer = questions[i].options[questions[i].correctAnswer];
+
+        resultHTML += `<p><strong>Question ${i + 1}:</strong> ${questions[i].question}</p>`;
+        resultHTML += `<p>Your Answer: ${userAnswer}</p>`;
+        resultHTML += `<p>Correct Answer: ${correctAnswer}</p><br>`;
+    }
+
+    resultElement.innerHTML = resultHTML;
+}
+
+// Function to start quiz after watching YouTube video
+function startQuizAfterVideo() {
+    const videoContainer = document.querySelector('.video-container');
+    const quizContainer = document.querySelector('.quiz-container');
+
+    videoContainer.style.display = 'none';
+    quizContainer.style.display = 'block';
+
+    displayQuestion(); // Start the quiz
+}
+
+// Load questions from external file and start the quiz
+function loadQuestions() {
+    const script = document.createElement('script');
+    script.src = 'questions.js';
+    script.onload = () => {
+        // Start the quiz after loading questions
+        startQuizButton.addEventListener('click', startQuizAfterVideo);
+    };
+    document.body.appendChild(script);
+}
+
+// Start loading questions when the page is ready
+document.addEventListener('DOMContentLoaded', loadQuestions);
+
diff --git a/styles.css b/styles.css
@@ -0,0 +1,62 @@
+/* Apply styles to the user info container */
+.user-info-container {
+    text-align: center;
+    padding: 20px;
+    background-color: #f5f5f5;
+}
+
+/* Apply styles to the quiz container */
+.quiz-container {
+    text-align: left; /* Align content to the left */
+    padding: 20px;
+    background-color: #ffffff;
+}
+
+/* Style quiz question */
+#question {
+    font-size: 24px;
+    margin-bottom: 20px;
+}
+
+/* Style quiz options */
+#options {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start; /* Align options to the left */
+}
+
+/* Style quiz option buttons */
+.option {
+    margin: 10px 0; /* Add spacing between options */
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #f0f0f0;
+    border: 1px solid #ccc;
+    cursor: pointer;
+}
+
+.option:hover {
+    background-color: #e0e0e0;
+}
+
+/* Style submit button */
+#submit {
+    margin-top: 10px;
+    padding: 10px 20px;
+    font-size: 18px;
+    background-color: #007bff;
+    color: #ffffff;
+    border: none;
+    cursor: pointer;
+}
+
+#submit:hover {
+    background-color: #0056b3;
+}
+
+/* Style result section */
+#result {
+    font-size: 18px;
+    margin-top: 20px;
+}
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		Question,Option 1,Option 2,Option 3,Option 4,Correct Answer Index
		Which of the following best describes 'Neerakshi'?,Autonomous underwater vehicle,Water purification system DRDO,Drip Irrigation System by ICAR,Drought resistant rice,0