Перемещение между дивами

@Feefort103 · Регистрация: 05.04.2019

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

Здравствуйте. Делаю тест. Надо реализовать перемещение между вопросами, каждый из них находится в отдельном диве.
Пытался сделать сам, не получилось. Погуглил, не нашёл.

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Тест для полёта.</title>
    <link rel="stylesheet" href="stest.css">
    <script src="sub.js"></script>
</head>
<body>
    <div id="q1" style="display:block;">
    <h1>Что такое информатика?</h1>
    <p><input type="radio" name="v1">Наука, изучающая структуру, общие свойства и методы передачи информации, в том числе связанной с применением ЭВМ.</p>
    <p><input type="radio" name="v1">Практика предотвращения несанкционированного доступа, использования, раскрытия, искажения, изменения, исследования, записи или уничтожения информации.</p>
    <p><input type="radio" name="v1">Процессы, методы поиска, сбора, хранения, обработки, предоставления, распространения информации.</p>
    <p><input type="radio" name="v1">Метафора, которая отражает революционное воздействие информационных технологий на все сферы жизни общества.</p>
    <button onclick="check();" class="cont">Следующий вопрос</button>
    </div>
    <div id="q2" style="display:none;">
    <h1>Что такое компьютерная сеть?</h1>
    <p><input type="radio" name="v2">Вычислительная или сетевая архитектура, в которой задания или сетевая нагрузка распределены между поставщиками услуг.</p>
    <p><input type="radio" name="v2">Область деятельности, в которой компьютеры наряду со специальным программным обеспечением используются в качестве инструмента как для создания и редактирования изображений.</p>
    <p><input type="radio" name="v2">Программно-аппаратный комплекс, опеспечивающий автоматизированный обмен данными между компьютерами по каналам связи.</p>
    <p><input type="radio" name="v2">Теория и технология создания машин, которые могут производить обнаружение, отслеживание и классификацию объектов.</p>
    <button onclick="check();" class="cont">Следующий вопрос</button>
    </div>
    <div id="q3" style="display:none;">
    <h1>Что такое глобальная сеть?</h1>
    <p><input type="radio" name="v3">Устройство или система, способная выполнять заданную, чётко определённую, изменяемую последовательность операций.</p>
    <p><input type="radio" name="v3">Система связанных между собой локальных сетей и компьютеров отдельных пользователей, удалённых друг от друга на большие расстояния.</p>
    <p><input type="radio" name="v3">Вид вредоносного программного обеспечения, способного внедряться в код других программ, системные области памяти, загрузочные секторы, и распространять свои копии по разнообразным каналам связи.</p>
    <p><input type="radio" name="v3">Метод неразрушающего послойного исследования внутреннего строения предмета.</p>
    <button onclick="check();" class="cont">Продолжить</button>
    </div>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
 function check(){
  var rarr=document.getElementsByName("r");
  if(rarr[0].checked){
     document.getElementById('q1').style.display = "none";
     document.getElementById('q2').style.display = "block";
  }
  else {
    document.location.href = "unc1v.html"
  }
 }

@fixeri · 30.01.2020, 15:07

PHP/HTML
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Тест для полёта.</title>
    <!-- <link rel="stylesheet" href="stest.css"> -->
    <!-- <script src="sub.js"></script> -->
</head>
<body>
    <div class="question" id="q1" style="display:block;">
        <h1>Что такое информатика?</h1>
        <p><input type="radio" name="v1">Наука, изучающая структуру, общие свойства и методы передачи информации, в том числе связанной с применением ЭВМ.</p>
        <p><input type="radio" name="v1">Практика предотвращения несанкционированного доступа, использования, раскрытия, искажения, изменения, исследования, записи или уничтожения информации.</p>
        <p><input type="radio" name="v1">Процессы, методы поиска, сбора, хранения, обработки, предоставления, распространения информации.</p>
        <p><input type="radio" name="v1">Метафора, которая отражает революционное воздействие информационных технологий на все сферы жизни общества.</p>
        <button onclick="check(this.parentElement);" class="cont">Следующий вопрос</button>
    </div>
    <div class="question" id="q2" style="display:none;">
        <h1>Что такое компьютерная сеть?</h1>
        <p><input type="radio" name="v2">Вычислительная или сетевая архитектура, в которой задания или сетевая нагрузка распределены между поставщиками услуг.</p>
        <p><input type="radio" name="v2">Область деятельности, в которой компьютеры наряду со специальным программным обеспечением используются в качестве инструмента как для создания и редактирования изображений.</p>
        <p><input type="radio" name="v2">Программно-аппаратный комплекс, опеспечивающий автоматизированный обмен данными между компьютерами по каналам связи.</p>
        <p><input type="radio" name="v2">Теория и технология создания машин, которые могут производить обнаружение, отслеживание и классификацию объектов.</p>
        <button onclick="check(this.parentElement);" class="cont">Следующий вопрос</button>
    </div>
    <div class="question" id="q3" style="display:none;">
        <h1>Что такое глобальная сеть?</h1>
        <p><input type="radio" name="v3">Устройство или система, способная выполнять заданную, чётко определённую, изменяемую последовательность операций.</p>
        <p><input type="radio" name="v3">Система связанных между собой локальных сетей и компьютеров отдельных пользователей, удалённых друг от друга на большие расстояния.</p>
        <p><input type="radio" name="v3">Вид вредоносного программного обеспечения, способного внедряться в код других программ, системные области памяти, загрузочные секторы, и распространять свои копии по разнообразным каналам связи.</p>
        <p><input type="radio" name="v3">Метод неразрушающего послойного исследования внутреннего строения предмета.</p>
        <button onclick="check(this.parentElement);" class="cont">Продолжить</button>
    </div>
    <script type="text/javascript">
        "use strict";
        function check(el) {
            let current = el;
            let next = el.nextElementSibling;
            if (next && next.classList.contains("question")) {
                current.style.display = "none";
                next.style.display = "block";   
            }
         }
    </script>
</body>
</html>

Добавлено через 11 минут
Лучше отделяйте все стили и скрипты от разметки.

PHP/HTML
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Тест для полёта.</title>
    <style type="text/css">
        .question {
            display: none;
        }
 
        .question:first-child {
            display: block;
        }
    </style>
</head>
<body>
    <div class="questions">
        <div class="question" id="q1">
            <h1>Что такое информатика?</h1>
            <p><input type="radio" name="v1">Наука, изучающая структуру, общие свойства и методы передачи информации, в том числе связанной с применением ЭВМ.</p>
            <p><input type="radio" name="v1">Практика предотвращения несанкционированного доступа, использования, раскрытия, искажения, изменения, исследования, записи или уничтожения информации.</p>
            <p><input type="radio" name="v1">Процессы, методы поиска, сбора, хранения, обработки, предоставления, распространения информации.</p>
            <p><input type="radio" name="v1">Метафора, которая отражает революционное воздействие информационных технологий на все сферы жизни общества.</p>
            <button class="cont">Следующий вопрос</button>
        </div>
        <div class="question" id="q2">
            <h1>Что такое компьютерная сеть?</h1>
            <p><input type="radio" name="v2">Вычислительная или сетевая архитектура, в которой задания или сетевая нагрузка распределены между поставщиками услуг.</p>
            <p><input type="radio" name="v2">Область деятельности, в которой компьютеры наряду со специальным программным обеспечением используются в качестве инструмента как для создания и редактирования изображений.</p>
            <p><input type="radio" name="v2">Программно-аппаратный комплекс, опеспечивающий автоматизированный обмен данными между компьютерами по каналам связи.</p>
            <p><input type="radio" name="v2">Теория и технология создания машин, которые могут производить обнаружение, отслеживание и классификацию объектов.</p>
            <button class="cont">Следующий вопрос</button>
        </div>
        <div class="question" id="q3">
            <h1>Что такое глобальная сеть?</h1>
            <p><input type="radio" name="v3">Устройство или система, способная выполнять заданную, чётко определённую, изменяемую последовательность операций.</p>
            <p><input type="radio" name="v3">Система связанных между собой локальных сетей и компьютеров отдельных пользователей, удалённых друг от друга на большие расстояния.</p>
            <p><input type="radio" name="v3">Вид вредоносного программного обеспечения, способного внедряться в код других программ, системные области памяти, загрузочные секторы, и распространять свои копии по разнообразным каналам связи.</p>
            <p><input type="radio" name="v3">Метод неразрушающего послойного исследования внутреннего строения предмета.</p>
            <button class="cont">Продолжить</button>
        </div>
    </div>
    <script type="text/javascript">
        "use strict";
 
        document.getElementsByClassName("questions")[0].addEventListener("click", function (e) {
            let el = e.target;
            if (!el.classList || !el.classList.contains("cont")) return false;
            check(el.parentElement);
        });
 
        function check(el) {
            let current = el;
            let next = el.nextElementSibling;
            if (!next || !next.classList.contains("question")) return false;
            current.style.display = "none";
            next.style.display = "block";
        }
    </script>
</body>
</html>

@Feefort103 · 30.01.2020, 15:12 **[ТС]**

У меня в javascript файле имеется проверка по радиокнопкам. Как сделать с ней?

Добавлено через 49 секунд
Так и делаю.

Добавлено через 1 минуту
Имею в виду: если ответ правильный, сделать перемещение на другой див.

@fixeri · 30.01.2020, 15:14

Feefort103, а где хранятся правильные ответы?

@Feefort103 · 30.01.2020, 15:38 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
function check(){
  var rarr=document.getElementsByName("r");
  if(rarr[0].checked){
     <!-- здесь перемещение -->
  }
else {
     <!-- здесь другое -->
}

Добавлено через 18 минут
Нашёл в гугле.

@fixeri · 30.01.2020, 15:56

PHP/HTML
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
74
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Тест для полёта.</title>
    <style type="text/css">
        .question {
            display: none;
        }
 
        .question:first-child {
            display: block;
        }
 
        label {
            display: block;
            padding: 10px 0;
        }
    </style>
</head>
<body>
    <div class="questions">
        <div class="question" id="q1">
            <h1>Что такое информатика?</h1>
            <label><input type="radio" data-right="true" name="v1">Наука, изучающая структуру, общие свойства и методы передачи информации, в том числе связанной с применением ЭВМ.</label>
            <label><input type="radio" name="v1">Практика предотвращения несанкционированного доступа, использования, раскрытия, искажения, изменения, исследования, записи или уничтожения информации.</label>
            <label><input type="radio" name="v1">Процессы, методы поиска, сбора, хранения, обработки, предоставления, распространения информации.</label>
            <label><input type="radio" name="v1">Метафора, которая отражает революционное воздействие информационных технологий на все сферы жизни общества.</label>
            <button class="cont">Следующий вопрос</button>
        </div>
        <div class="question" id="q2">
            <h1>Что такое компьютерная сеть?</h1>
            <label><input type="radio" data-right="true" name="v2">Вычислительная или сетевая архитектура, в которой задания или сетевая нагрузка распределены между поставщиками услуг.</label>
            <label><input type="radio" name="v2">Область деятельности, в которой компьютеры наряду со специальным программным обеспечением используются в качестве инструмента как для создания и редактирования изображений.</label>
            <label><input type="radio" name="v2">Программно-аппаратный комплекс, опеспечивающий автоматизированный обмен данными между компьютерами по каналам связи.</label>
            <label><input type="radio" name="v2">Теория и технология создания машин, которые могут производить обнаружение, отслеживание и классификацию объектов.</label>
            <button class="cont">Следующий вопрос</button>
        </div>
        <div class="question" id="q3">
            <h1>Что такое глобальная сеть?</h1>
            <label><input type="radio" name="v3">Устройство или система, способная выполнять заданную, чётко определённую, изменяемую последовательность операций.</label>
            <label><input type="radio" data-right="true" name="v3">Система связанных между собой локальных сетей и компьютеров отдельных пользователей, удалённых друг от друга на большие расстояния.</label>
            <label><input type="radio" name="v3">Вид вредоносного программного обеспечения, способного внедряться в код других программ, системные области памяти, загрузочные секторы, и распространять свои копии по разнообразным каналам связи.</label>
            <label><input type="radio" name="v3">Метод неразрушающего послойного исследования внутреннего строения предмета.</label>
            <button class="cont">Продолжить</button>
        </div>
    </div>
    <script type="text/javascript">
        "use strict";
 
        document.getElementsByClassName("questions")[0].addEventListener("click", function (e) {
            let el = e.target;
            if (!el.classList || !el.classList.contains("cont")) return false;
            check(el.parentElement);
        });
 
        function check(el) {
            let current = el;
            let next = el.nextElementSibling;
            let ch = current.querySelector("input[type='radio']:checked");
 
            if (!ch || !ch.dataset[`right`]) return window.alert('Ошибка');
 
            if (!next || !next.classList.contains("question")) {
                window.alert("Вопросы закончились.");
                // return false;
            } else {
                current.style.display = "none";
                next.style.display = "block";
            }
        }
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@Feefort103 0 / 0 / 0 Регистрация: 05.04.2019 Сообщений: 18
	30.01.2020, 15:12 [ТС]
	У меня в javascript файле имеется проверка по радиокнопкам. Как сделать с ней? Добавлено через 49 секунд Так и делаю. Добавлено через 1 минуту Имею в виду: если ответ правильный, сделать перемещение на другой див. 0

@fixeri 380 / 230 / 115 Регистрация: 22.11.2016 Сообщений: 379
	30.01.2020, 15:14
	Feefort103, а где хранятся правильные ответы? 0