Тренажер Вопрос-Ответ
Добрый день.
Помогите, пожалуйста, написать скрипт. Имеется код: <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-кода, а не в виде обычного текста (чтобы я мог выделить нужные слова, задать стили и так далее). |
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>
|
рони. спасибо вам огромное!
Скажите, можно ли этот скрипт исправить, чтобы вопросы выводились по порядку, а не рандомно? Или чтобы рандомно выведенные вопросы хотя бы не повторялись? |
На мой взгляд не следует использовать элементы, которых не существует в спецификации (<text>)
Цитата:
<!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, спасибо огромное за ваш скрипт. Все работает отлично.
|
| Часовой пояс GMT +3, время: 19:47. |