Продолжаю делать игру на js игру "Верю/не верю". На экране поочередно появляются заголовки утверждений. Пользователь отвечает на каждое утверждение поочередно. Всего 5 утверждений. Если пользователь нажал на кнопку Неправда тогда появляется следующее утверждение. А если правда тогда появляется описание. К следующему вопросу можно перейти нажав на белый кружочек, которые под заголовками, который превращается в красный, если уже был дан ответ на него (любой) или нажав на кнопку Дальше.
Вопрос:
- Как добавить кнопку "Дальше", которая позволит переходить к следующему вопросу? Пока пользователь не ответил на вопрос, она не активна, до тех пор, пока он не даст ответ.
- Как добавить кнопку которая появится после того как пользователь даст ответ на все вопросы (все шарики внизу заполнены
const data = [
{stmt: "Утверждение 1", desc: "Объяснение утверждения 1"},
{stmt: "Утверждение 2", desc: "Объяснение утверждения 2"},
{stmt: "Утверждение 3", desc: "Объяснение утверждения 3"},
];
let curStmt = 0;
function showStmt(idx) {
document.getElementById('progress-item-' + curStmt).classList.remove('current');
curStmt = idx;
document.getElementById('stmt').innerText = data[idx].stmt;
document.getElementById('desc').innerText = data[idx].desc;
document.getElementById('progress-item-' + idx).classList.add('current');
applyComplete(data[idx].complete);
}
function applyComplete(val) {
val = (val) ? true : false;
document.getElementById('desc').style.visibility = (val) ? 'visible' : 'hidden';
document.getElementById('btnTrue').disabled = val;
document.getElementById('btnFalse').disabled = val;
}
function createProgressBar() {
const parent = document.getElementById('progress');
parent.innerHTML = '';
for (let i = 0; i < data.length; i++) {
const item = document.createElement('div');
item.setAttribute('data-idx', i);
item.id = 'progress-item-' + i;
item.classList.add('item');
if (data[i].complete)
item.classList.add('complete');
parent.appendChild(item);
}
}
function btnClick(val) {
data[curStmt].complete = true;
document.getElementById('progress-item-' + curStmt).classList.add('complete');
if (val || (curStmt === data.length - 1)) {
applyComplete(true);
} else {
showStmt(curStmt + 1);
}
}
document.getElementById('progress').addEventListener(
'click',
function (e) {
if (e.target.classList.contains('item')) {
const newIdx = e.target.getAttribute('data-idx') - 0;
if (newIdx != curStmt) {
showStmt(newIdx);
}
}
},
true
);
createProgressBar();
showStmt(0);
.section {
margin: 10px 0;
}
#progress .item {
height: 10px;
width: 10px;
margin: 0 5px;
border: 2px solid red;
border-radius: 50%;
display: inline-block;
cursor: pointer;
}
#progress .item.current {
border-color: blue;
}
#progress .item.complete {
background-color: green;
}
#progress .item:not(.complete):hover {
background-color: lime;
}
<div class="section">
<div id="stmt"></div>
<div id="desc"></div>
</div>
<div class="section buttons">
<button id="btnTrue" onclick="btnClick(true)">Правда</button>
<button id="btnFalse" onclick="btnClick(false)">Ложь</button>
<div>
<div id="progress" class="section"></div>
)