Создать мини-тест на JavaScript

@encodeMind · Регистрация: 05.03.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте. Нужно сделать очень маленький тест на JavaScript с HTML формами.

1. Как меня зовут? (Выбор ответа радиокнопкой) // Правильный ответ - Ваня.
Гоша.
Олег.
Ваня.

2. Самая длинная улица в городе? (Тут будет выпадающий список из 2-х элементов) // Правильный ответ - Московская.
Алапаевец.
Московская.

Под тестом будут 2 кнопки - это "Подсчитать результаты", "Очистить форму" и input type="text", в котором будут написаны баллы за тест (1 правильный ответ - это 1 балл). Буду благодарен если Вы поможете сделать мне этот мини-тест. Спасибо.

@Lazy_Den · 19.05.2014, 22:54

Тестируем тут.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<form>
  <p>Как меня зовут?<br>
    <label>
      <input type="radio" name="myname" value="0">
      Гоша</label>
    <br>
    <label>
      <input type="radio" name="myname" value="0">
      Олег</label>
    <br>
    <label>
      <input type="radio" name="myname" value="1">
      Ваня</label>
    <br>
    <label>
      <input type="radio" name="myname" value="0">
      Забыл</label>
  </p>
  <label for="street">Самая длинная улица в городе?</label><br>
  <select name="street" id="select">
    <option value="0"></option>
    <option value="0">Алапаевец</option>
    <option value="1">Московская</option>
  </select>
  <p>
    <input type="button" id="calc" value="Подсчитать результаты">
    <input type="reset" value="Сброс">
  </p>
    Итого баллов: <input type="text" name="result" readonly>
</form>

JavaScript
1
2
3
4
calc.onclick = function(){
    var myform = this.form;
    myform.result.value = +myform.myname.value + +myform.street.value;
}

Добавлено через 2 минуты
P.S. Только к регулярным выражениям, в раздел которых вы и задали вопрос, задача не относится.

@encodeMind · 19.05.2014, 23:14 **[ТС]**

Спасибо большое) Вопрос, если я создам ещё поле checkbox, в котором можно выбрать несколько ответов, и выберу из них 2 правильных, то есть value будет равно 1 у каждого правильно ответа в checkbox, то счёт баллов тоже будет идти правильно?

Добавлено через 15 минут
А вы можете сделать это через if?

@Lazy_Den · 19.05.2014, 23:19

encodeMind, C checkbox-ами чуть сложнее. Смотрим тут

JavaScript
1
2
3
4
5
6
7
8
9
10
11
calc.onclick = function(){
    var myform = this.form,
        chbx = myform['precipitation[]'],
        chbxSum = 0;
    for(var i = 0; i < chbx.length; i++){
        if(chbx[i].checked) {
            chbxSum += +chbx[i].value;
        }
    }
    myform.result.value = +myform.myname.value + +myform.street.value + chbxSum;
}

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

А вы можете сделать это через if?

Не понял... Что именно сделать?

@encodeMind · 19.05.2014, 23:29 **[ТС]**

Через if, наподобие такой конструкции:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function scoref()
    {
     var counter=0;
     if (test.q1[1].checked) {counter++;}
     if (test.q2.value=="Проспект Кирова") {counter++;}
     if (test.q3[2].checked) {counter++;}
     if (test.q4[1].selected) {counter++;}
     
     if (test.q5[0].checked) {counter++;}
     if (test.q5[2].checked) {counter++;}
     if (test.q5[4].checked) {counter++;}
     
     if (test.q5[1].checked) {counter--;}
     if (test.q5[3].checked) {counter--;}
     
     
     document.test.display.value=counter;
    }

-------

HTML5
1
2
3
4
5
<b>3. Сколько районов в городе</b>
<tr><td><label/><input type="radio" name="q3" value="1"/>10</td></tr>
<tr><td><label/><input type="radio" name="q3" value="2"/>8</td></tr>
<tr><td><label/><input type="radio" name="q3" value="3"/>6</td></tr>
<tr><td><label/><input type="radio" name="q3" value="4"/>4</td></tr>

@Lazy_Den · 19.05.2014, 23:36

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

Через if, наподобие такой конструкции

Так вы же практически уже и сделали сами

Не знаю... Такой вариант подойдет?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
calc.onclick = function(){
    var myform = this.form,
        chbx = myform['precipitation[]'],
        sum = 0;
    for(var i = 0; i < chbx.length; i++){
        if(chbx[i].checked && (chbx[i].value == 'Дождь' || chbx[i].value == 'Снег'))
            sum++;
    }
    if(myform.myname.value == 'Ваня') sum++;
    if(myform.street.value == 'Московская') sum++;
    
    myform.result.value = sum;
};

@encodeMind · 20.05.2014, 22:27 **[ТС]**

Вы мне очень хорошо помогли, спасибо большое) Я Вам во многом благодарен.

Добавлено через 22 часа 47 минут
Всё сделал как Вы написали, но тест не хочет работать, не подсчитывает баллы.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<html>
<head>
<title>Тест (Как вы меня знаете?)</title>
<meta charset="1251">
<script type="text/javascript">
calc.onclick = function(){
    var myform = this.form,
        chbx = myform['testGeorge'],
        sum = 0;
    for(var i = 0; i < chbx.length; i++){
        if(chbx[i].checked && (chbx[i].value == 'Дождь' || chbx[i].value == 'Снег'))
            sum++;
    }
    if(myform.myname.value == 'Ваня') sum++;
    if(myform.street.value == 'Московская') sum++;
    
    myform.result.value = sum;
};  
</script>
<style type="text/css">
*{
    text-align: center;
}
</style>
</head>
<body>
<form>
  <p>Как меня зовут?<br>
    <label>
      <input type="radio" name="myname" value="Гоша">
      Гоша</label>
    <br>
    <label>
      <input type="radio" name="myname" value="Олег">
      Олег</label>
    <br>
    <label>
      <input type="radio" name="myname" value="Ваня">
      Ваня</label>
    <br>
    <label>
      <input type="radio" name="myname" value="Забыл">
      Забыл</label>
  </p>
  <label for="street">Самая длинная улица в городе?</label><br>
  <select name="street" id="select">
    <option value="0"></option>
    <option value="Алапаевец">Алапаевец</option>
    <option value="Московская">Московская</option>
  </select>
  <p>Осадки это:<br>
    <label>
      <input type="checkbox" name="testGeorge" value="Дождь">
      Дождь</label>
    <br>
    <label>
      <input type="checkbox" name="testGeorge" value="Снег">
      Снег</label>
    <br>
    <label>
      <input type="checkbox" name="testGeorge" value="Кирпич">
      Кирпич</label>
    <br>
  </p>
  <p>
    <input type="button" id="calc" value="Подсчитать результаты">
    <input type="reset" value="Сброс">
  </p>
    Итого баллов: <input type="text" name="result" readonly>
</form>
</body>
 
</html>

@Lazy_Den · 20.05.2014, 22:45

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

но тест не хочет работать

Расположите JS-код в самом низу перед закрывающим тегом </body>

@encodeMind · 20.05.2014, 22:57 **[ТС]**

Спасибо большое. Теперь всё заработало. Вы можете объяснить почему код нужно расположить именно перед </body>, а не в шапке сайта?

@Lazy_Den · 21.05.2014, 00:01

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

можете объяснить почему код нужно расположить именно перед

Если простыми словами, то JS может работать с элементами страницы (DOM), когда они полностью подгружены и, так сказать, "прочитаны" браузером. Если JS-код расположен до элементов, с которыми должен работать, то он и начинает выполняться раньше, чем эти элементы появятся. Посему, он их попросту "не увидит".
Существует два варианта: или же расположить код после элементов, или же расположить в <head>, отлавливать событие полной загрузки страницы и инициировать, когда загрузка будет завершена. Например:

JavaScript
1
2
3
window.onload=function(){
    // ваш код
};

@dinaf2000 · 10.06.2015, 12:30

Здравствуйте, возможно ли сделать так что бы перед началом теста , пользователь проходил "идентификацию". Типо с начало заполняет поля : Имя Фамилия и т.д ( это на отдельной странице ). После его переносит на страницу с тестом , и да возможно организовать вопрос с вводом ответа ? Хотелось бы еще сделать так что бы был какой то счетчик времени по истечении которого ответы вводить не получиться. После окончание теста пользователя должно перенести на другую страницу ,но результаты показывать не должно. Результаты должны храниться в "памяти", а после , когда все пользователи пройдут тест выстроить таблицу результатов в убывающем порядке так же на отдельной странице.

Знаю, что работа не легкая, но все же нужна помощь . Спасибо заранее .

@MRJay · 29.08.2015, 06:06

Подскажите пожалуйста, как сделать, чтобы в результате, в сумме, если цифра выше 100, то обрезалось до 100, не выше и вставлялся ответ 100, а если ниже, то точный?

@BANO · 31.08.2015, 07:32

MRJay, в js знак "%" возвращает остаток от деления
то есть, если у меня есть число 15, и я сделаю такой пример: 15 % 10, то мне возвратится 5

короче перед самым выводом на экран сделайте так

JavaScript
1
vash_elementVuvoda.value=preremen % 100

@MRJay · 02.09.2015, 02:35

Кто знает, как можно сделать, чтобы в этом тесте в результате выводилось не само число а текст, в зависимости от этого числа.

Например, если результат = 12 то выводился один текст, если меньше 12 то другой и т.д.

Вот есть пример кода, но не знаю как можно их подружить

JavaScript
1
2
3
4
5
6
7
for (i=0; i<answ.length;i++) {nok+=answ.charAt(i)=="1"?1:0;}
if(nok==2) s="ОТЛИЧНО";
if(nok<2) s="ХОРОШО";
if(nok<1.5) s="УДОВЛЕТВОРИТЕЛЬНО";
if (nok<1) s="НЕУДОВЛЕТВОРИТЕЛЬНО";
    document.test.s1.
    value="Количество правильных ответов "+nok+". Ваша оценка "+s+"";

Добавлено через 6 минут
BANO, не совсем вас понял. Мне нужно следующее:

максимально возможное значение у меня должно быть 100%. Но в ответах специально проставлены проценты, сумма которых может быть выше 100, например если ответить на все правильно то сумма будет 230. Мне нужно, чтобы, если пользователь наберет к примеру 140% в сумме, то обрезалось до 100% и выводился результат 100.

@SvenyUP · 17.09.2021, 10:10

Lazy_Den, Дэн, привет, очень срочно, я наткнулся на твой ответ, мне нужен тест, я все ввожу и тест не дает ответа, обьясни, куда именно нужно вводить код джава?

@j2FunOnly · 17.09.2021, 15:40

SvenyUP,

PHP/HTML
1
2
3
4
5
6
7
8
9
<form>
  ...
</form>
<script type="text/javascript">
  calc.onclick = function() {
    var myform = this.form;
    myform.result.value = +myform.myname.value + +myform.street.value;
  }
</script>

@SvenyUP · 18.09.2021, 08:46

j2FunOnly, спасибо большое, теперь ответы выходят, но смотри, высвечивается вот такая ошибка, не подскажешь как исправить?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

Создать мини-тест на JavaScript

Решение

Решение

@encodeMind 1 / 1 / 0 Регистрация: 05.03.2014 Сообщений: 27

	Создать мини-тест на JavaScript 19.05.2014, 22:14. Показов 62198. Ответов 16 Метки нет (Все метки) Здравствуйте. Нужно сделать очень маленький тест на JavaScript с HTML формами. 1. Как меня зовут? (Выбор ответа радиокнопкой) // Правильный ответ - Ваня. Гоша. Олег. Ваня. 2. Самая длинная улица в городе? (Тут будет выпадающий список из 2-х элементов) // Правильный ответ - Московская. Алапаевец. Московская. Под тестом будут 2 кнопки - это "Подсчитать результаты", "Очистить форму" и input type="text", в котором будут написаны баллы за тест (1 правильный ответ - это 1 балл). Буду благодарен если Вы поможете сделать мне этот мини-тест. Спасибо. 0

@encodeMind 1 / 1 / 0 Регистрация: 05.03.2014 Сообщений: 27
	19.05.2014, 23:14 [ТС]
	Спасибо большое) Вопрос, если я создам ещё поле checkbox, в котором можно выбрать несколько ответов, и выберу из них 2 правильных, то есть value будет равно 1 у каждого правильно ответа в checkbox, то счёт баллов тоже будет идти правильно? Добавлено через 15 минут А вы можете сделать это через if? 0

@encodeMind 1 / 1 / 0 Регистрация: 05.03.2014 Сообщений: 27
	20.05.2014, 22:57 [ТС]
	Спасибо большое. Теперь всё заработало. Вы можете объяснить почему код нужно расположить именно перед </body>, а не в шапке сайта? 0

@dinaf2000 0 / 0 / 0 Регистрация: 28.03.2015 Сообщений: 18
	10.06.2015, 12:30
	Здравствуйте, возможно ли сделать так что бы перед началом теста , пользователь проходил "идентификацию". Типо с начало заполняет поля : Имя Фамилия и т.д ( это на отдельной странице ). После его переносит на страницу с тестом , и да возможно организовать вопрос с вводом ответа ? Хотелось бы еще сделать так что бы был какой то счетчик времени по истечении которого ответы вводить не получиться. После окончание теста пользователя должно перенести на другую страницу ,но результаты показывать не должно. Результаты должны храниться в "памяти", а после , когда все пользователи пройдут тест выстроить таблицу результатов в убывающем порядке так же на отдельной странице. Знаю, что работа не легкая, но все же нужна помощь . Спасибо заранее . 0

@MRJay 0 / 0 / 0 Регистрация: 13.09.2012 Сообщений: 57
	29.08.2015, 06:06
	Подскажите пожалуйста, как сделать, чтобы в результате, в сумме, если цифра выше 100, то обрезалось до 100, не выше и вставлялся ответ 100, а если ниже, то точный? 0

@SvenyUP 0 / 0 / 0 Регистрация: 17.09.2021 Сообщений: 3
	17.09.2021, 10:10
	Lazy_Den, Дэн, привет, очень срочно, я наткнулся на твой ответ, мне нужен тест, я все ввожу и тест не дает ответа, обьясни, куда именно нужно вводить код джава? Миниатюры 0

@SvenyUP 0 / 0 / 0 Регистрация: 17.09.2021 Сообщений: 3
	18.09.2021, 08:46
	j2FunOnly, спасибо большое, теперь ответы выходят, но смотри, высвечивается вот такая ошибка, не подскажешь как исправить? Миниатюры 0