Number Average Calculator
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>
NEW APPS
These are apps made by the community!