Веб-приложение для викторины на умножение с использованием HTML CSS и JavaScript

Опубликовано: 28 Декабря, 2022

В этой статье мы увидим, как создать веб-приложение для викторины на умножение с использованием HTML, CSS и JavaScript.

Описание веб-приложения: в этом веб-приложении случайные вопросы появляются один за другим на основе базового умножения. Если вы дадите правильный ответ, то он увеличится на +1, а если вы дадите неправильный ответ, то он уменьшится на -1.

Структура файла: есть три файла index.html (файл HTML), дизайн всех элементов веб-страницы с использованием style.css (файл CSS) и предоставление всей логической функциональности с помощью script.js (файл JavaScript).

index.html
стиль.css
script.js

Условие:

Formaninput теги в HTML.
Отображение Flex в CSS.
Базовая концепция DOM и локальное хранилище в JavaScript.

HTML-файл:

Создайте один класс контейнера в котором присутствуют все элементы.
Внутри контейнера создайте форму и удалите атрибут действия.
Форма содержит заголовки вопросов и оценок с одним полем ввода для ответов пользователя и кнопкой «Отправить».

index.html

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiplication Quiz WebApp</title>
  
    <link rel="stylesheet" href="style.css">
  
</head>
  
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <h3><b> Multiplication Quiz App </b></h3>
        <form id="form">
            <p id="score">score : 0</p>
            <h1 id="question">What is X Multiply of X?</h1>
            <input type="number" id="inp" placeholder="Enter Your Answer" 
                   autofocus autocomplete="off">
            <button id="btn" type="submit">Submit</button>
        </form>
    </div>
  
    <script src="script.js"></script>
</body>
</html>

CSS-файл:

Удалите поля и отступы по умолчанию из тела.
Установите display flex в контейнере и выровняйте все элементы по центру по свойствам flex.
Остальные элементы разработаны в соответствии с потребностями разработчика.

style.css

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
  
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}
  
h1{
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 20px;
    color: green;
}
  
h3
{
    font-size: 20px;
    font-weight: 700;
    margin: -10px 0 20px;
} 
#form {
    padding: 10px 20px;
    margin: 10px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
  
#score {
    font-size: 18px;
    text-align: right;
    font-weight: 700;
    color: green;
}
  
#question {
    color: green;
    font-weight: 700;
    font-size: 25px;
}
  
#inp {
    color: green;
    border: 3px solid green;
    border-radius: 5px;
    padding: 15px 0;
    margin: 10px 0px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    outline: none;
}
  
#inp::placeholder {
    color: green;
}
  
#btn {
    background-color: green;
    outline: none;
    border: none;
    border-radius: 5px;
    padding: 15px 0;
    margin: 10px 0px;
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: white;
    letter-spacing: 1px;
}

Файл JavaScript:

Создайте две переменные для хранения случайного числа с помощью математического объекта. В вопросе добавьте эти два числа с помощью свойства JavaScript innerText. Кроме того, сохраните ответ этих двух случайных чисел в одной переменной.
Если пользователь нажимает кнопку «Отправить», он сравнивает ответ пользователя и правильный ответ. Если оба равны, то увеличьте оценку на +1, в противном случае уменьшите оценку на -1.
Добавьте счет в локальное хранилище с помощью метода localstorage.getItem().

script.js

const questionElement = document.getElementById("question");
  
let num1 = Math.floor(Math.random() * 10);
let num2 = Math.floor(Math.random() * 10);
let correctAnswer = num1 * num2;
  
questionElement.innerText = `What is ${num1} Multiply by ${num2}?`;
  
const form = document.getElementById("form");
const input = document.getElementById("inp");
let scoreElement = document.getElementById("score");
  
let score = Number(localStorage.getItem("score"));
if(!score) {
    score = 0;
}
  
scoreElement.textContent = `score : ${score}`;
  
form.addEventListener("submit",function() {
    let userAnswer = +input.value;
    if(correctAnswer === userAnswer) {
        score++;
        updateScore();
    }
    else {
        score--;
        updateScore();
    }
});
  
function updateScore() {
    localStorage.setItem("score",String(score));
}
  
// Clear Local Storage 
// localStorage.removeItem("score");

Output:

Multiplication Quiz WebApp

JavaScript HTML CSS

Веб-приложение для викторины на умножение с использованием HTML CSS и JavaScript

index.html

style.css

script.js

РЕКОМЕНДУЕМЫЕ СТАТЬИ