Calculator Tools Calculator Tools
Create

Number Average Calculator

Oct 3, 2025

About this app

An interactive application to calculate the average of the provided numbers and display statistical insights.

Fun Quiz App Fun Quiz 🎉

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Fun Quiz App</title>
<meta name="description" content="A fun, interactive quiz application to test your knowledge with colorful visuals and emojis!">
<meta name="keywords" content="quiz, interactive, game, app, fun">

<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&family=Sansita+Swashed&display=swap" rel="stylesheet">

<style>
body {
background: linear-gradient(to right, #84fab0, #8fd3f4);
color: #333;
font-family: 'Raleway', sans-serif;
}
#quiz-container {
margin-top: 100px;
}
.question {
font-size: 1.5em;
margin-bottom: 20px;
}
button {
background-color: #ff7675;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1.2em;
}
button:hover {
background-color: #d63031;
}
#result {
margin-top: 20px;
padding: 20px;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.9);
}
</style>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const questions = [
{ question: "🦁 What is the largest land animal?", answers: ["Elephant", "Giraffe", "Rhino", "Hippo"], correct: 0 },
{ question: "🌍 What planet do we live on?", answers: ["Mars", "Earth", "Jupiter", "Venus"], correct: 1 },
{ question: "🍕 What is the Italian word for pie?", answers: ["Puzzle", "Plate", "Pizza", "Pasta"], correct: 2 }
];

let currentQuestionIndex = 0;
let score = 0;

function showQuestion() {
const questionData = questions[currentQuestionIndex];
const questionEl = document.getElementById('question');
const answersEl = document.getElementById('answers');

questionEl.innerText = questionData.question;
answersEl.innerHTML = questionData.answers.map((answer, index) =>
`<button class="answer-btn" data-index="${index}">${answer}</button>`).join('');

document.querySelectorAll('.answer-btn').forEach(btn => {
btn.addEventListener('click', function() {
if (parseInt(this.getAttribute('data-index')) === questionData.correct) {
score++;
}
currentQuestionIndex++;
if (currentQuestionIndex < questions.length) {
showQuestion();
} else {
document.getElementById('quiz-container').innerHTML =
`<h2>Your Score: ${score}/${questions.length}</h2>
<button id="restart-btn">Restart Quiz</button>`;
document.getElementById('restart-btn').addEventListener('click', function() {
currentQuestionIndex = 0;
score = 0;
showQuestion();
});
}
});
});
}

showQuestion();
});
</script>
</head>
<body>
<div id="quiz-container" class="container text-center">
<h1>Fun Quiz 🎉</h1>
<p class="question" id="question"></p>
<div id="answers"></div>
<div id="result"></div>
</div>
</body>
</html>