Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.06.2023, 21:20
Новичок на форуме
Отправить личное сообщение для CopyDuck Посмотреть профиль Найти все сообщения от CopyDuck
 
Регистрация: 03.06.2023
Сообщений: 3

Тренажер Вопрос-Ответ
Добрый день.
Помогите, пожалуйста, написать скрипт.

Имеется код:

<p>Вопрос 1</br> <text class="hidden"> Ответ 1</text></p>
<p>Вопрос 2</br> <text class="hidden"> Ответ 2</text></p>
<p>Вопрос 3</br> <text class="hidden"> Ответ 3</text></p>

Мне нужны 2 кнопки.
По нажатию первой кнопки "Вопрос" на странице рандомно должен появляться один из абзацев, при этом содержимое тегов <text></text> (то есть ответ) должно быть скрыто.
По нажатию второй кнопки "Ответ" должен отобразиться весь абзац целиком (то есть вопрос и ответ).

Иными словами, жму кнопку "Вопрос", вижу один из вопросов, жму кнопку "Ответ", вижу уже показанный вопрос и ответ к нему.
Нажимаю кнопку "Вопрос" повторно, получаю новый вопрос со скрытым ответом.

Примечание: теги я написал приблизительно. Их можно изменить, если это упростит задачу. Однако, и вопрос и ответ могут быть очень длинными (несколько предложений), и мне они необходимы в виде html-кода, а не в виде обычного текста (чтобы я мог выделить нужные слова, задать стили и так далее).
Ответить с цитированием
  #2 (permalink)  
Старый 03.06.2023, 22:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

CopyDuck,
<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        p.item,
        p.item .hidden {
            display: none;
        }
        p.item.open {
            display: block;
        }
        p.item.show,
        p.item.show .hidden {
            display: block;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const question = document.querySelector('button.question');
            const answer = document.querySelector('button.answer');
            const items = document.querySelectorAll('p.item');
            const len = items.length;
            let p = items[0];
            question.addEventListener('click', () => {
                p.classList.remove('show', 'open');
                p = items[len * Math.random() | 0];
                p.classList.add('open');
            });
            answer.addEventListener('click', () => {
                p.classList.remove('open');
                p.classList.add('show');
            });
        })
    </script>
</head>
<body>
    <button type="button" class="question">Вопрос</button>
    <button type="button" class="answer">Ответ</button>
    <p class="item">Вопрос 1</br> <text class="hidden"> Ответ 1</text></p>
    <p class="item">Вопрос 2</br> <text class="hidden"> Ответ 2</text></p>
    <p class="item">Вопрос 3</br> <text class="hidden"> Ответ 3</text></p>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 03.06.2023, 23:15
Новичок на форуме
Отправить личное сообщение для CopyDuck Посмотреть профиль Найти все сообщения от CopyDuck
 
Регистрация: 03.06.2023
Сообщений: 3

рони. спасибо вам огромное!
Скажите, можно ли этот скрипт исправить, чтобы вопросы выводились по порядку, а не рандомно? Или чтобы рандомно выведенные вопросы хотя бы не повторялись?

Последний раз редактировалось CopyDuck, 04.06.2023 в 00:46.
Ответить с цитированием
  #4 (permalink)  
Старый 04.06.2023, 12:08
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,742

На мой взгляд не следует использовать элементы, которых не существует в спецификации (<text>)
Сообщение от CopyDuck
Или чтобы рандомно выведенные вопросы хотя бы не повторялись?
<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .item:not(.open) {
            display: none;
        }
        .item>.answer:not(.show) {
            display: none;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const brestart = document.getElementById('brestart');
            const bquestion = document.getElementById('bquestion');
            const banswer = document.getElementById('banswer');
            const items = document.querySelectorAll('.item');
            let itemopen;

            bquestion.addEventListener('click', () => {
                const itemsnotshown = document.querySelectorAll('.item:not(.shown)');  
                if ( itemopen) {
                    itemopen.classList.remove('open');
                    itemopen.querySelector('.answer').classList.remove('show')                   
                }           
                if (itemsnotshown.length === 0) return;
                const n = Math.floor(Math.random() * itemsnotshown.length);
                itemopen=itemsnotshown[n];
                itemopen.classList.add('open', 'shown');             
            });

            banswer.addEventListener('click', () => {
                itemopen.querySelector('.answer').classList.add('show');
            });

            brestart.addEventListener('click', () => {
                items.forEach(item => item.classList.remove('shown'));
                if ( itemopen) {
                    itemopen.classList.remove('open');
                    itemopen.querySelector('.answer').classList.remove('show')                   
                }           
            })
        })
    </script>
</head>
<body>
    <button type="button" id="brestart">Повторить</button>
    <br>
    <button type="button" id="bquestion">Вопрос</button>
    <button type="button" id="banswer">Ответ</button>
    <div class="item">
        <p class="question">Вопрос 1</p>
        <p class="answer"> Ответ 1</p>
    </div>
    <div class="item">
        <p class="question">Вопрос 2</p>
        <p class="answer"> Ответ 2</p>
    </div>
    <div class="item">
        <p class="question">Вопрос 3</p>
        <p class="answer"> Ответ 3</p>
    </div>
    <div class="item">
        <p class="question">Вопрос 4</p>
        <p class="answer"> Ответ 4</p>
    </div>
    <div class="item">
        <p class="question">Вопрос 5</p>
        <p class="answer"> Ответ 5</p>
    </div>

</body>
</html>

Последний раз редактировалось voraa, 04.06.2023 в 13:23.
Ответить с цитированием
  #5 (permalink)  
Старый 04.06.2023, 14:15
Новичок на форуме
Отправить личное сообщение для CopyDuck Посмотреть профиль Найти все сообщения от CopyDuck
 
Регистрация: 03.06.2023
Сообщений: 3

voraa, спасибо огромное за ваш скрипт. Все работает отлично.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Меню с выезжающим сайдбаром Jaz Элементы интерфейса 17 26.06.2016 19:21
Неизвестный идентификатор FaNaT_96 Общие вопросы Javascript 14 01.05.2016 18:15
Аяксовый ответ UhWhat Общие вопросы Javascript 1 10.04.2016 20:25
Вопрос про глобальную переменную UhWhat Общие вопросы Javascript 0 09.04.2016 15:54
Не могу найти ответ на простой вопрос lukingnu jQuery 2 25.11.2010 17:03