Генератор математических примеров с проверкой на js

Question

Генератор математических примеров с проверкой на js

Рейтинг: 0Ответов: 1Опубликовано: 23.08.2023

У меня следующая задача. Сделать Тренажёр устного счёта. Идея почти реализована.

Вот подробное описание того, как по задумке должно работать: ввожу данные в поля для ввода (Минимальное число, максимальное число, количество примеров. Между полями для максимального и минимального чисел знак производимой операции) и нажимаю на кнопку "Generate". После этого генерируется один пример с рандомными числами, сгенерированными в данном диапазоне. Возле примера input для ввода ответа. Внизу появляется кнопка "Checkout" для проверки. После нажатия на кнопку "Checkout", если пример решён верно, снизу от input появляется надпись "Верно", цикл генерирует следующий пример и генерировать он их будет после каждого правильного ответа будет до тех пор, пока их число не будет равняться тому, что пользователь ранее ввёл в третий input. Если неправильно то должна появиться надпись "Неверно" и ничего кроме этого.

Мой код работает не так.

let minimum = document.querySelector('#minimum');
let maximum = document.querySelector('#maximum');
let select = document.querySelector('#select');
let taskAmount = document.querySelector('#amount');
let button = document.querySelector('.button');
let taskWrapper = document.querySelector('.tasks');
let submitBtnWrapper = document.querySelector('.submit');

button.addEventListener('click', () => {
    let minimumN = Number(minimum.value);
    let maximumN = Number(maximum.value);
    let taskAmountN = Number(taskAmount.value);
    let sign = select.options[select.selectedIndex].text;
    let massive = new Array(taskAmountN);
    for (let i = 0; i < massive; i++) {
        function random(min, max) {
            localStorage.num1 = Math.floor(Math.random() * (max + 1 - min) + min);
            localStorage.num2 = Math.floor(Math.random() * (max + 1 - min) + min);
            taskWrapper.innerHTML += `
                <div class="tasks__wrapper">
                    <label class="tasks__item">${localStorage.num1} ${sign} ${localStorage.num2} = </label>
                    <input type="number" class="tasks__input" placeholder="Answer">
                    <div class="checking"></div>
                </div>
                `;
        }
        submitBtnWrapper.innerHTML = '<button class="submit__button">checkout</button>';
        if (i >= 1) {
            let submitBtn = document.querySelector('.submit__button');
            submitBtn.addEventListener('click', () => {
                let allTasksWrappers = [...document.querySelectorAll('.tasks__wrapper')];
                for (let j = 0; j < allTasksWrappers.length; j++) {
                    let lastElement = allTasksWrappers[allTasksWrappers.length - 1];
                    let answerValue = lastElement.querySelector('.tasks__input');
                    let answerFromInput = Number(answerValue.value);
                    let tasksWrapper = document.querySelector('.checking');
                    if (sign == '+') {
                        let realAnswer = Number(localStorage.num1) + Number(localStorage.num2);
                        if (realAnswer == answerFromInput) {
                            tasksWrapper.innerHTML = '<p>Верно</p>';
                            random(minimumN, maximumN);
                        } else {
                            tasksWrapper.innerHTML = '<p>Неверно</p>';
                            return false;
                        }
                    } else if (sign == '-') {
                        let realAnswer = Number(localStorage.num1) - Number(localStorage.num2);
                        if (realAnswer == answerFromInput) {
                            tasksWrapper.innerHTML = '<p>Верно</p>';
                            random(minimumN, maximumN);
                        } else {
                            tasksWrapper.innerHTML = '<p>Неверно</p>';
                            return false;
                        }
                    } else if (sign == '*') {
                        let realAnswer = Number(localStorage.num1) * Number(localStorage.num2);
                        if (realAnswer == answerFromInput) {
                            tasksWrapper.innerHTML = '<p>Верно</p>';
                            random(minimumN, maximumN);
                        } else {
                            tasksWrapper.innerHTML = '<p>Неверно</p>';
                            return false;
                        }
                    } else if (sign == '/') {
                        let realAnswer = Number(localStorage.num1) / Number(localStorage.num2);
                        if (realAnswer == answerFromInput) {
                            tasksWrapper.innerHTML = '<p>Верно</p>';
                            random(minimumN, maximumN);
                        } else {
                            tasksWrapper.innerHTML = '<p>Неверно</p>';
                            return false;
                        }
                    }
                }

            });
        } else if (i == 0) {
            random(minimumN, maximumN);
            let submitBtn = document.querySelector('.submit__button');
            submitBtn.addEventListener('click', () => {
                let answerValue = document.querySelector('.tasks__input');
                let answerFromInput = answerValue.value;
                let tasksWrapper = document.querySelector('.checking');
                if (sign == '+') {
                    let realAnswer = Number(localStorage.num1) + Number(localStorage.num2);
                    if (realAnswer == answerFromInput) {
                        tasksWrapper.innerHTML = '<p>Верно</p>';
                        random(minimumN, maximumN);
                    } else {
                        tasksWrapper.innerHTML = '<p>Неверно</p>';
                        return false;
                    }
                } else if (sign == '-') {
                    let realAnswer = Number(localStorage.num1) - Number(localStorage.num2);
                    if (realAnswer == answerFromInput) {
                        tasksWrapper.innerHTML = '<p>Верно</p>';
                        random(minimumN, maximumN);
                    } else {
                        tasksWrapper.innerHTML = '<p>Неверно</p>';
                        return false;
                    }
                } else if (sign == '*') {
                    let realAnswer = Number(localStorage.num1) * Number(localStorage.num2);
                    if (realAnswer == answerFromInput) {
                        tasksWrapper.innerHTML = '<p>Верно</p>';
                        random(minimumN, maximumN);
                    } else {
                        tasksWrapper.innerHTML = '<p>Неверно</p>';
                        return false;
                    }
                } else if (sign == '/') {
                    let realAnswer = Number(localStorage.num1) / Number(localStorage.num2);
                    if (realAnswer == answerFromInput) {
                        tasksWrapper.innerHTML = '<p>Верно</p>';
                        random(minimumN, maximumN);
                    } else {
                        tasksWrapper.innerHTML = '<p>Неверно</p>';
                        return false;
                    }
                }
            });
        }
    }
});

:root {
    --default-black: #111111;
    --medium-black: #202020;
    --light-black: #969696;
    --white: #f3f3f3;
    --blue: #006bc9;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background: var(--medium-black);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: var(--medium-black);
    color: var(--light-black);
    font-size: 16px;
}
.container {
    padding: 0 15px;
    margin: 0 auto;
    width: 100%;
    max-width: 1140px;
}
section {
    margin-top: 40px;
}
.inputs__wrapper {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
input {
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid var(--light-black);
    outline: none;
    color: var(--white);
    margin: 10px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button
{
  -webkit-appearance: none;
  margin: 0;
}
input::placeholder {
    color: var(--light-black);
}
input:focus {
    border: 1px solid var(--blue);
}
select {
    border: 1px solid var(--light-black);
    border-radius: 6px;
    padding: 10px 14px;
    outline: none;
    position: relative;
    margin: 10px;
}
select option {
    position: absolute;
    background-color: var(--default-black);
    top: 100%;
    left: 50%;
    z-index: 2;
}
.button-wrapper, .submit {
    display: flex;
    justify-content: center;
}
button {
    text-transform: capitalize;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid var(--light-black);
    cursor: pointer;
}
button:hover {
    border: 1px solid var(--blue);
    color: var(--blue);
}
.tasks {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.submit {
    margin-bottom: 30px;
}

<!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>Counting</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <section class="inputs__wrapper">
            <input type="number" name="minimum" id="minimum" placeholder="Minimal">
            <select name="select" id="select">
                <option value="">+</option>
                <option value="">-</option>
                <option value="">/</option>
                <option value="">*</option>
            </select>
            <input type="number" name="maximum" id="maximum" placeholder="Maximum">
            <input type="number" name="amount" id="amount" placeholder="Amount of tasks">
        </section>
        <div class="button-wrapper">
            <button class="button">generate</button>
        </div>
        <section class="tasks"></section>
        <section class="submit"></section>
    </div>

    <script src="script.js"></script>
</body>

</html>

javascript условия массивы события циклы

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Мой код работает не так.

Предложу вот такой подход для реализации твоей задумки...

Там пока нет проверок на корректность ввода. С делением я не стал связываться... Исключительно "как идея" которую потом можно будет развивать далее.

const act = {
  '+': (a, b) => a + b,
  '-': (a, b) => a - b,
  '*': (a, b) => a * b,
}
const oa = document.querySelector('section select')
const ob = document.querySelector('section button')
const oi = document.querySelectorAll('section input')
const oc = document.querySelector('content')
Object.keys(act).forEach(v => {
  const o = document.createElement('option')
  o.value = v
  o.textContent = v
  oa.insertAdjacentElement('beforeend', o)
})
ob.addEventListener('click', _ => {
  const n = +oi[2].value  
  let i = 0
  let ok = 0
  task()
  //
  function task() {
    const v = oi[1].value - oi[0].value
    const a = Math.floor(Math.random() * v) + +oi[0].value
    const b = Math.floor(Math.random() * v) + +oi[0].value
    const o = data.content.children[0].cloneNode(true)
    const os = o.querySelectorAll('span')
    os[0].textContent = ++i
    os[1].textContent = a
    os[2].textContent = oa.value
    os[3].textContent = b
    o.querySelector('button').addEventListener('click', _ => {
      const v = +o.querySelector('input').value
      const or = o.querySelector('.res')
      if (v == act[oa.value](a, b)) {
        or.textContent = 'Правильно'
        ++ok
      } else {
        or.textContent = 'Ошибка'
      }
      if (ok < n) task()
    })
    oc.insertAdjacentElement('beforeend', o)
  }
})

<section>
  <div>
    <input placeholder='Минимальный' />
    <select></select>
    <input placeholder='Максимальный' />
    <input placeholder='Количество испытаний' />
  </div>
  <button>Старт</button>  
</section>
<content></content>
<template id='data'>
  <article>
    <p>
      Задание №<span></span> 
    </p>
    <div>
      <span></span> <span></span> <span></span> = <input />
    </div>
    <button>Проверить</button>
    <p class='res'></p>
  </article>
</template>

Генератор математических примеров с проверкой на js

Ответы