Scribd
Upload
36 views

EX 4 IP - PDF

1. The document describes creating an online exam using JavaScript by defining an array of question objects in a JavaScript file linked to an HTML file. 2. It initializes variables to track the current question and user's score, and includes functions to display questions, handle answers, and calculate the final score. 3. DOM manipulation is used to dynamically update the HTML elements and add event listeners to trigger the necessary functions when the user submits answers.

Uploaded by

Norah C
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
36 views

EX 4 IP - PDF

1. The document describes creating an online exam using JavaScript by defining an array of question objects in a JavaScript file linked to an HTML file. 2. It initializes variables to track the current question and user's score, and includes functions to display questions, handle answers, and calculate the final score. 3. DOM manipulation is used to dynamically update the HTML elements and add event listeners to trigger the necessary functions when the user submits answers.

Uploaded by

Norah C
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Ex.

No 4

Aim: Create an HTML page to display an online exam using JavaScript.

Algorithm:

1. Create an HTML file and name it "online_exam.html".

2. Inside the HTML file, add the necessary elements such as headings, questions, options, buttons, and result
display area.

3. Link the HTML file to a JavaScript file named "script.js" using the <script> tag.

4. In the JavaScript file, define an array of objects to store the questions, options, and correct answers.

5. Initialize variables to keep track of the current question index and the user's score.

6. Create functions to display the current question, handle the user's answer, and calculate the score.

7. Use DOM manipulation to dynamically update the HTML elements with the question, options, and result.

8. Add event listeners to handle button clicks and trigger the necessary functions.

9. Once all questions have been answered, display the final score.

Coding:

online_exam.html:

<!DOCTYPE html>

<html>

<head>

<title>Online Exam</title>

<script src="script.js"></script>
</head>

<body>

<h1>Online Exam</h1>

<div id="question"></div>

<div id="options"></div>

<button id="submit">Submit Answer</button>

<div id="result"></div>

</body>

</html>

script.js:

// Array to store questions, options, and correct answers

var questions = [

question: "What is the capital of France?",

options: ["London", "Paris", "Rome", "Berlin"],

answer: 1

},

question: "Which planet is known as the Red Planet?",

options: ["Mars", "Jupiter", "Saturn", "Venus"],

answer: 0

},

{
question: "Who painted the Mona Lisa?",

options: ["Leonardo da Vinci", "Pablo Picasso", "Vincent van Gogh", "Michelangelo"],

answer: 0

];

var currentQuestionIndex = 0;

var score = 0;

function displayQuestion() {

var questionElement = document.getElementById("question");

var optionsElement = document.getElementById("options");

var currentQuestion = questions[currentQuestionIndex];

questionElement.textContent = currentQuestion.question;

optionsElement.innerHTML = ""; // Clear previous options

for (var i = 0; i < currentQuestion.options.length; i++) {

var option = document.createElement("input");

option.type = "radio";

option.name = "answer";

option.value = i;
optionsElement.appendChild(option);

var label = document.createElement("label");

label.textContent = currentQuestion.options[i];

optionsElement.appendChild(label);

optionsElement.appendChild(document.createElement("br"));

function handleAnswer() {

var selectedOption = document.querySelector('input[name="answer"]:checked');

if (selectedOption) {

var answer = parseInt(selectedOption.value);

if (answer === questions[currentQuestionIndex].answer) {

score++;

currentQuestionIndex++;

selectedOption.checked = false;
if (currentQuestionIndex < questions.length) {

displayQuestion();

} else {

displayResult();

function displayResult() {

var resultElement = document.getElementById("result");

resultElement.textContent = "Your score: " + score + " out of " + questions.length;

// Event listener for the submit button

document.getElementById("submit").addEventListener("click", handleAnswer);

// Start the exam

displayQuestion();

Output: Screeshot

Result : The above experiment has completed successfully

You might also like