Продолжаю делать игру на 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>
)
Добавил 2 кнопки Далее и финальную кнопу
Добавил 2 функции - checkProgressBar()
проверяет на все ли вопросы даны ответы, функция nextQuestion()
переключает пользователя на ближайший не отвеченный вопрос
const data = [
{stmt: "Утверждение 1", desc: "Объяснение утверждения 1"},
{stmt: "Утверждение 2", desc: "Объяснение утверждения 2"},
{stmt: "Утверждение 3", desc: "Объяснение утверждения 3"},
],
nextBtn=document.querySelector("#next_btn"),
completeElemBtn=document.querySelector('#testComplete_btn'),
item_arr=document.getElementsByClassName("item")
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;
checkProgressBar()
}
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 checkProgressBar(){
let check=0,
next=false
for(let n=0;n<item_arr.length;n++){
if(item_arr[n].classList.contains('complete')){
check++
//Кнопка Дальше станет активна если вопрос выбран и выполнен
item_arr[n].classList.contains('current')?next=true:false
}
}
next?nextBtn.classList.remove('disable'):nextBtn.classList.add('disable')
//Если все вопросы выполнены - появится финальная кнопка
if(check==item_arr.length){
completeElemBtn.classList.remove('hide')
next_btn.classList.add('disable')
}
else{
completeElemBtn.classList.add('hide')
}
}
//Функция переключения на следующий вопрос
function nextQuestion(){
for(let n=0;n<item_arr.length;n++){
if(!item_arr[n].classList.contains('complete')){
showStmt(n)
break
}
}
}
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;
}
.hide{
display:none;
}
.disable{
pointer-events: none;
opacity:0.5;
}
<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>
<button id="next_btn" class="disable" onclick="nextQuestion()">Следующий</button>
<button id="testComplete_btn" class="hide">Порадоваться за себя</button>
Решил заморочаться с голосовым вводом, нашёл картинку в интернете, подключил(предварительно скачав), подогнал по размерам с помощью скрипта...
Помогите, пожалуйста решить огроменную проблему(( нужно заменить блок при клике на другой, чтобы он стал больше и при этом выехал на середину...
Нужно в модальном окне выделить текст полужирным шрифтом и выделить желтым цветом: