Scribd
Upload
6 views7 pages

Education Website

Uploaded by

enock01111992
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views7 pages

Education Website

Uploaded by

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

<!

DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8”>

<meta name=”viewport” content=”width=device-width, initial-


scale=1.0”>

<title>Math Quiz</title>

<link rel=”stylesheet” href=”style.css”>

</head>

<body>

<div class=”container”>

<h1>Math Quiz</h1>

<div id=”question-box”>

<p id=”question”></p>

<input type=”text” id=”answer” placeholder=”Your answer


here”>

<button onclick=”submitAnswer()”>Submit</button>

<p id=”feedback”></p>

</div>

<div class=”reward”>

<h2>Total Rewards: $<span


id=”total-rewards”>0.00</span></h2>

</div>

</div>

<script src=”script.js”></script>

</body>

</html>
Body {

Font-family: Arial, sans-serif;

Display: flex;

Align-items: center;

Justify-content: center;

Height: 100vh;

Margin: 0;

Background-color: #f4f4f4;

.container {

Width: 300px;

Text-align: center;

Background: white;

Padding: 20px;

Border-radius: 8px;

Box-shadow: 0 0 10px rgba(0,0,0,0.1);

#question-box {

Margin-top: 20px;

Input[type=”text”] {

Width: 100%;

Padding: 10px;

Margin: 10px 0;

Border: 1px solid #ddd;

Border-radius: 4px;
}

Button {

Padding: 10px 20px;

Background-color: #4CAF50;

Color: white;

Border: none;

Border-radius: 4px;

Cursor: pointer;

Button:hover {

Background-color: #45a049;

.reward {

Margin-top: 20px;

Let totalRewards = 0;

// Mock question data (in a real application, retrieve from server/database)

Const questions = [

{ question: “5 + 3”, answer: “8”, reward: 0.50 },

{ question: “10 – 4”, answer: “6”, reward: 0.75 },

{ question: “6 * 7”, answer: “42”, reward: 1.00 },

{ question: “12 / 4”, answer: “3”, reward: 0.25 }


];

Let currentQuestionIndex = 0;

Function loadQuestion() {

Const questionElement = document.getElementById(“question”);

questionElement.textContent =
questions[currentQuestionIndex].question;

Function submitAnswer() {

Const userAnswer = document.getElementById(“answer”).value;

Const feedbackElement = document.getElementById(“feedback”);

If (userAnswer === questions[currentQuestionIndex].answer) {

feedbackElement.textContent = “Correct!”;

totalRewards += questions[currentQuestionIndex].reward;

document.getElementById(“total-rewards”).textContent =
totalRewards.toFixed(2);

nextQuestion();

} else {

feedbackElement.textContent = “Incorrect, try again.”;

Document.getElementById(“answer”).value = “”; // Clear answer field

Function nextQuestion() {

currentQuestionIndex = (currentQuestionIndex + 1) % questions.length;


// Loop through questions

loadQuestion();
}

// Load first question on page load

Window.onload = loadQuestion;

CREATE DATABASE math_quiz;

USE math_quiz;

 Table to store questions and rewards

CREATE TABLE questions (

Id INT PRIMARY KEY AUTO_INCREMENT,

Question TEXT NOT NULL,

Answer VARCHAR(50) NOT NULL,

Reward DECIMAL(5, 2) NOT NULL

);

 Table to store user rewards

CREATE TABLE users (

Id INT PRIMARY KEY AUTO_INCREMENT,

Username VARCHAR(50) UNIQUE NOT NULL,

Total_rewards DECIMAL(10, 2) DEFAULT 0

);

 Insert sample questions

INSERT INTO questions (question, answer, reward) VALUES

(“5 + 3”, “8”, 0.50),


(“10 – 4”, “6”, 0.75),

(“6 * 7”, “42”, 1.00),

(“12 / 4”, “3”, 0.25);

// app.js

Const express = require(‘express’);

Const mysql = require(‘mysql’);

Const app = express();

App.use(express.json());

Const db = mysql.createConnection({

Host: “localhost”,

User: “root”,

Password: “”,

Database: “math_quiz”

});

App.get(‘/questions’, (req, res) => {

Db.query(“SELECT id, question, reward FROM questions”, (err, results)


=> {

If (err) throw err;

Res.json(results);
});

});

App.post(‘/submit-answer’, (req, res) => {

Const { questionId, userAnswer, userId } = req.body;

Db.query(“SELECT answer, reward FROM questions WHERE id = ?”,


[questionId], (err, results) => {

If (err) throw err;

If (results[0].answer === userAnswer) {

Const reward = results[0].reward;

Db.query(“UPDATE users SET total_rewards = total_rewards + ?


WHERE id = ?”, [reward, userId]);

Res.json({ success: true, reward });

} else {

Res.json({ success: false });

});

});

App.listen(3000, () => console.log(‘Server running on port 3000’));

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy