Форум

igorzyden · #1 (**permalink**) 23.02.2022, 23:24

Для кого-то может это вопрос 1-го класса, но я уже не первый день не могу придумать как реализовать.

Реализована задачка, когда генерируется два рандомных числа от 1 до 10 и предлагается ввести ответ их суммы, а кнопкой проверить правильность.

Возможно, указанный мной код можно было иначе составить.

<head>
<title>Математические задания</title>
</head>

<body>

<div id="primer">

        <span id="inp_1"></span> +
        <span id="inp_2"></span> =
        <input type="number" id="plus" width="5">
        <button onclick="multi()">Проверить</button>
        <p id="result"></p>

</div>

</body>


<script type="text/javascript">

  var multi_1;
  multi_1 = Math.round(Math.random()*10);
  multi_1 = document.getElementById('inp_1').innerHTML = multi_1;

  var multi_2;
  multi_2 = Math.round(Math.random()*10);
  multi_2 = document.getElementById('inp_2').innerHTML = multi_2;

  result1 = multi_1 + multi_2;
  
  result = document.getElementById('result');


function multi()
{

check = document.querySelector('input').value;

  if (result1 == check)
	result.innerHTML = "Правильно";
  else
  	result.innerHTML = "Неправильно";

}

</script>

А теперь нужно, чтобы таких примеров было, скажем, пять.

Как при помощи Javascript это реализовать, чтобы не вручную пять раз копировать куски кода?

То есть,
число1 + число2 = input [Проверить данный ответ]
число1 + число2 = input [Проверить данный ответ]
число1 + число2 = input [Проверить данный ответ]
число1 + число2 = input [Проверить данный ответ]
число1 + число2 = input [Проверить данный ответ]

Догадываюсь, что при помощи цикла и массивов, но правильно код так и не смог собрать.

рони · #2 (**permalink**) 23.02.2022, 23:35

igorzyden,
избавьтесь от id.

igorzyden · #3 (**permalink**) 23.02.2022, 23:53

Сообщение от рони

igorzyden,
избавьтесь от id.

От которого?
И каким образом это размножит?

рони · #4 (**permalink**) 24.02.2022, 00:00

igorzyden,

<head>
    <title>Математические задания</title>
    <meta charset="utf-8">
</head>

<body>
    <div class="primer">
        <span class="num"></span> +
        <span class="num"></span> =
        <input type="number" class="plus" width="5">
        <button type="button">Проверить</button>
        <p class="result"></p>
    </div>
    <div class="primer">
        <span class="num"></span> +
        <span class="num"></span> =
        <input type="number" class="plus" width="5">
        <button type="button">Проверить</button>
        <p class="result"></p>
    </div>
    <div class="primer">
        <span class="num"></span> +
        <span class="num"></span> =
        <input type="number" class="plus" width="5">
        <button type="button">Проверить</button>
        <p class="result"></p>
    </div>
</body>
<script>
    const random = n => Math.round(Math.random() * n);

    document.querySelectorAll('.primer').forEach(div => {
        let sum = 0;
        div.querySelectorAll('.num').forEach(span => {
            let num = random(10);
            span.textContent = num;
            sum += num;
        })
        let input = div.querySelector('.plus'),
            button = div.querySelector('button'),
            result = div.querySelector('.result');
        button.addEventListener('click', _ => result.textContent = input.value == sum ? 'Правильно' : 'Неправильно')
    })
</script>

igorzyden · #5 (**permalink**) 24.02.2022, 00:06

рони,
в плане результата, спасибо, работает.

Но по реализации, получается без копирования вручную участка кода
<div class="primer">....</div>
вообще не обойтись и при помощи, например, цикла Javascript это не заменить?

И если бы примеров нужно было бы 100, то значит нужно 100 раз вручную копировать ту часть кода?

рони · #6 (**permalink**) 24.02.2022, 00:15

igorzyden,
клонируйте блок сколько вам нужно в строке 31

рони · #7 (**permalink**) 24.02.2022, 00:21

igorzyden,

<head>
    <title>Математические задания</title>
    <meta charset="utf-8">
    <style type="text/css">
    body{
        counter-reset: num 0;
    }
    .primer:before{
    counter-increment: num ;
    content:  counter(num)'. ';}

    </style>
</head>

<body>
    <div class="primer">
        <span class="num"></span> +
        <span class="num"></span> =
        <input type="number" class="plus" width="5">
        <button type="button">Проверить</button>
        <p class="result"></p>
    </div>

</body>
<script>
    const random = n => Math.round(Math.random() * n);
    let block = document.querySelector('.primer');
    let length = 99;
    let arr = Array.from({length}, _ => block.cloneNode(true));
    document.body.append(...arr);
    document.querySelectorAll('.primer').forEach(div => {
        let sum = 0;
        div.querySelectorAll('.num').forEach(span => {
            let num = random(10);
            span.textContent = num;
            sum += num;
        })
        let input = div.querySelector('.plus'),
            button = div.querySelector('button'),
            result = div.querySelector('.result');
        button.addEventListener('click', _ => result.textContent = input.value == sum ? 'Правильно' : 'Неправильно')
    })
</script>

igorzyden · #8 (**permalink**) 24.02.2022, 00:43

Супер.
Спасибо

igorzyden · #9 (**permalink**) 19.03.2022, 21:12

Походу совсем туго у меня с соображалкой, но мозг уже сломал и не придумал как сделать следующее.

Теперь надо чтобы в текущем коде генерируемые суммы двух цифр были не больше 10.

То есть, если генерируется 4+7 и т.п., то значит этот пример не подходит и надо чтобы вместо него сгенерировался другой.

Ну и понятно, чтобы все примеры соответствовали требованием и количество примеров задавалось клонированием.

рони · #10 (**permalink**) 19.03.2022, 21:36

Сообщение от igorzyden

суммы двух цифр были не больше 10.

<!DOCTYPE html>

<html>
<head>
    <title>Математические задания</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            counter-reset: num 0;
        }

        .primer:before {
            counter-increment: num;
            content: counter(num)'. ';
        }
    </style>
</head>

<body>
    <div class="primer">
        <span class="num"></span> +
        <span class="num"></span> =
        <input type="number" class="plus" width="5">
        <button type="button">Проверить</button>
        <p class="result"></p>
    </div>
    <script>
        const random = n => Math.round(Math.random() * n);
        const total = n => {
            let a = random(n),
                b = random(n - a);
            return [a, b]
        };
        let block = document.querySelector('.primer');
        let length = 99;
        let arr = Array.from({
            length
        }, _ => block.cloneNode(true));
        document.body.append(...arr);
        document.querySelectorAll('.primer').forEach(div => {
            let sum = 0,
                num = total(10);
            div.querySelectorAll('.num').forEach((span, i) => {
                span.textContent = num[i];
                sum += num[i];
            })
            let input = div.querySelector('.plus'),
                button = div.querySelector('button'),
                result = div.querySelector('.result');
            button.addEventListener('click', _ => result.textContent = input.value == sum ? 'Правильно' : 'Неправильно')
        })
    </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript