Scribd
Upload
12 views

Css Micro Merged

Uploaded by

anujgour95357
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
12 views

Css Micro Merged

Uploaded by

anujgour95357
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/ 18

D.Y.

PATIL TECHNICAL CAMPUS, TALSANDE


FACULTY OF ENGINEERING & FACULTY OF
MANAGEMENT
(Polytechnic)

A Micro project Report On


“Quize Game”

Submitted By

Enrollment No. Name


2212200075 Atharv Dagadu Miraje

Guided By
Mrs.S.J.Patil

D.Y.PATIL TECHNICAL CAMPUS, TALSANDE FACULTY OF


ENGINEERING & FACULTY OF MANAGEMENT
(Polytechnic)

DEPARTMENT OF COMPUTER ENGINEERING


SEMESTER IV
CERTIFICATE

This is to Certify that student of Computer Engineering has


successfully completed the project term work “Quize Game” in
partial fulfillment of the Diploma of Engineering in Computer as laid
down during academic year 2023- 24.

Roll No. Name of Student Exam Seat No.


3236 Atharv Dagadu Miraje

Mrs.S.J.Patil Ms.J.N.Gurav
Project Guide HoD

Dr. S.R. Pawaskar


Principal

Date – / /2024

Place – Talsande
INDEX

Sr No. Title Page no.

1 Introduction 1

2 Litreture Review 2

Source Code
3 3-12

4 Output 13

5 Conculusion 14

6 Refrences 15

1
➢ Introduction:

A JavaScript, HTML and CSS used to build interactive web


pages and features that are found on many professional websites. As a result we want a web
page displaying radio buttons and buttons in the statement. To achieve desired output we need
to use function, if statement, anchor tag, class ,etc. Appropriate use of functions and controls
results in user friendly, interactive and attractive web page. In this Quiz Game project, basically
challenge t to code the functionality of a quiz. At the end of the quiz, users should get a total
score.
The rationale for a micro project on a quiz app using JavaScript stems
from the growing demand for interactive learning tools that enhance user engagement and
knowledge retention. By leveraging JavaScript, the project aims to create a dynamic and
responsive interface that allows users to take quizzes, receive instant feedback, and track their
progress. This project not only reinforces programming skills but also emphasizes critical
concepts such as DOM manipulation, event handling, and asynchronous programming.
Additionally, it provides an opportunity to explore user experience design and implement
features like timers, scoring systems, and question randomization, making learning fun and
effective.

1
➢ Literature Review:

The history of micro projects in quiz apps using JavaScript traces


back to the early days of web development when basic HTML forms were employed to create
simple quizzes. As JavaScript gained popularity in the late 1990s and early 2000s, developers
began to leverage its capabilities for more interactive and responsive applications. The advent
of frameworks like jQuery simplified DOM manipulation and enhanced user experience. By
the mid-2010s, the emergence of modern frameworks such as React and Angular revolutionized
quiz app development, allowing for complex features like real-time scoring and multimedia
integration. Over the years, these applications have evolved from static question-and-answer
formats to dynamic, gaming fied experiences that emphasize user engagement and educational
effectiveness, reflecting broader trends in digital learning and technology integration.

2
➢ Code:

• Html:-

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Quiz App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Quiz App</h1>
<div id="quiz"></div>
<div id="result" class="result"></div>
<button id="submit" class="button">Submit</button>
<button id="retry" class="button hide">Retry</button>
<button id="showAnswer" class="button hide">Show Answer</button>
</div>
<script src="script.js"></script>
</body>
</html>

3
• Css:-

body {
font-family: 'Poppins', sans-serif;
background: #b9b3a9;
display: flex;
justify-content: center;
}

.container {
width: 450px;
padding: 20px;
margin-top: 80px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 20px;
}

h1 {
text-align: center;
}

.question {
font-weight: bold;
margin-bottom: 10px;
}

.option {
display: block;
margin-bottom: 10px;

4
}

.button {
display: inline-block;
padding: 10px 20px;
background-color: #428bca;
color: #fff;
border: none;
cursor: pointer;
font-size: 16px;
border-radius: 4px;
transition: background-color 0.3s;
margin-right: 10px;
}

.button:hover
{
background-color: #3071a9;
}

.result {
text-align: center;
margin-top: 20px;
font-weight: bold;
}

.hide{
display: none;
}

5
• Js:-

const quizData = [

{
question: 'What is the capital of France?',
options: ['Paris', 'London', 'Berlin', 'Madrid'],
answer: 'Paris',
},
{
question: 'What is the largest planet in our solar system?',
options: ['Mars', 'Saturn', 'Jupiter', 'Neptune'],
answer: 'Jupiter',
},
{
question: 'Which country won the FIFA World Cup in 2018?',
options: ['Brazil', 'Germany', 'France', 'Argentina'],
answer: 'France',
},
{
question: 'What is the tallest mountain in the world?',
options: ['Mount Everest', 'K2', 'Kangchenjunga', 'Makalu'],
answer: 'Mount Everest',
},
{
question: 'Which is the largest ocean on Earth?',
options: [
'Pacific Ocean',
'Indian Ocean',
'Atlantic Ocean',

6
'Arctic Ocean',
],
answer: 'Pacific Ocean',
},
{
question: 'What is the chemical symbol for gold?',
options: ['Au', 'Ag', 'Cu', 'Fe'],
answer: 'Au',
},
{
question: 'Who painted the Mona Lisa?',
options: [
'Pablo Picasso',
'Vincent van Gogh',
'Leonardo da Vinci',
'Michelangelo',
],
answer: 'Leonardo da Vinci',
},
{
question: 'Which planet is known as the Red Planet?',
options: ['Mars', 'Venus', 'Mercury', 'Uranus'],
answer: 'Mars',
},
{
question: 'What is the largest species of shark?',
options: [
'Great White Shark',
'Whale Shark',
'Tiger Shark',

7
'Hammerhead shark',
],
answer: 'Whale Shark',
},
{
question: 'Which animal is known as the King of the Jungle?',
options: ['Lion', 'Tiger', 'Elephant', 'Giraffe'],
answer: 'Lion',
},
];

const quizContainer = document.getElementById('quiz');


const resultContainer = document.getElementById('result');
const submitButton = document.getElementById('submit');
const retryButton = document.getElementById('retry');
const showAnswerButton = document.getElementById('showAnswer');

let currentQuestion = 0;
let score = 0;
let incorrectAnswers = [];

function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}

function displayQuestion() {
const questionData = quizData[currentQuestion];

8
const questionElement = document.createElement('div');
questionElement.className = 'question';
questionElement.innerHTML = questionData.question;

const optionsElement = document.createElement('div');


optionsElement.className = 'options';

const shuffledOptions = [...questionData.options];


shuffleArray(shuffledOptions);

for (let i = 0; i < shuffledOptions.length; i++) {


const option = document.createElement('label');
option.className = 'option';

const radio = document.createElement('input');


radio.type = 'radio';
radio.name = 'quiz';
radio.value = shuffledOptions[i];

const optionText = document.createTextNode(shuffledOptions[i]);

option.appendChild(radio);
option.appendChild(optionText);
optionsElement.appendChild(option);
}

quizContainer.innerHTML = '';
quizContainer.appendChild(questionElement);
quizContainer.appendChild(optionsElement);
}

9
function checkAnswer() {
const selectedOption = document.querySelector('input[name="quiz"]:checked');
if (selectedOption) {
const answer = selectedOption.value;
if (answer === quizData[currentQuestion].answer) {
score++;
} else {
incorrectAnswers.push({
question: quizData[currentQuestion].question,
incorrectAnswer: answer,
correctAnswer: quizData[currentQuestion].answer,
});
}
currentQuestion++;
selectedOption.checked = false;
if (currentQuestion < quizData.length) {
displayQuestion();
} else {
displayResult();
}
}
}
function displayResult() {
quizContainer.style.display = 'none';
submitButton.style.display = 'none';
retryButton.style.display = 'inline-block';
showAnswerButton.style.display = 'inline-block';

10
function retryQuiz() {
currentQuestion = 0;
score = 0;
incorrectAnswers = [];
quizContainer.style.display = 'block';
submitButton.style.display = 'inline-block';
retryButton.style.display = 'none';
showAnswerButton.style.display = 'none';
resultContainer.innerHTML = '';
displayQuestion();
}

function showAnswer() {
quizContainer.style.display = 'none';
submitButton.style.display = 'none';
retryButton.style.display = 'inline-block';
showAnswerButton.style.display = 'none';
let incorrectAnswersHtml = '';
for (let i = 0; i < incorrectAnswers.length; i++) {
incorrectAnswersHtml += `
<p>
<strong>Question:</strong> ${incorrectAnswers[i].question}<br>
<strong>Your Answer:</strong> ${incorrectAnswers[i].incorrectAnswer}<br>
<strong>Correct Answer:</strong> ${incorrectAnswers[i].correctAnswer}
</p>
`;
}

resultContainer.innerHTML = `

11
<p>You scored ${score} out of ${quizData.length}!</p>
<p>Incorrect Answers:</p>
${incorrectAnswersHtml}
`;
}

submitButton.addEventListener('click', checkAnswer);
retryButton.addEventListener('click', retryQuiz);
showAnswerButton.addEventListener('click', showAnswer);

displayQuestion();

12
➢ Output:

This Picure Describes Question In This Game.

This Picture Describes The Result In This Game And Question, Your Answer And Correct
Answer.

13
➢ Conculusion:

the quiz game project developed using CSS, HTML, and JavaScript successfully demonstrates
the power of front-end web development in creating interactive and engaging user experiences.
By implementing various styling techniques with CSS, the quiz interface was made visually
appealing and easy to navigate. The project not only highlighted the importance of clean,
responsive design but also showcased how CSS can enhance the user interface while ensuring
accessibility across different devices and screen sizes. Additionally, the integration of
JavaScript for game logic and interactivity added a dynamic layer to the project, improving
both functionality and user engagement.
Overall, this project provided valuable insights into the process of creating a seamless,
interactive web-based quiz game, combining the strengths of CSS for design and JavaScript
for functionality. It also emphasized the significance of testing and refining user interactions to
create an enjoyable experience.

14
➢ Refrences:

https://www.codewithfaraz.com/content/161/build-a-quiz-
application-with-html-css-and-javascript-step-by-step-guide

https://www.studocu.com/in/document/government-holkar-
science-college/bachelors-in-natural-science/project-report-quiz-
application/26362754

https://www.slideshare.net/harshverma164/minor-project-report-
for-quiz-application

15

You might also like