Появление кнопок после прохождения теста js

105
26 апреля 2022, 05:30

Продолжаю делать игру на js игру "Верю/не верю". На экране поочередно появляются заголовки утверждений. Пользователь отвечает на каждое утверждение поочередно. Всего 5 утверждений. Если пользователь нажал на кнопку Неправда тогда появляется следующее утверждение. А если правда тогда появляется описание. К следующему вопросу можно перейти нажав на белый кружочек, которые под заголовками, который превращается в красный, если уже был дан ответ на него (любой) или нажав на кнопку Дальше.

Вопрос:

  1. Как добавить кнопку "Дальше", которая позволит переходить к следующему вопросу? Пока пользователь не ответил на вопрос, она не активна, до тех пор, пока он не даст ответ.
  2. Как добавить кнопку которая появится после того как пользователь даст ответ на все вопросы (все шарики внизу заполнены

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>

)

Answer 1

Добавил 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>

READ ALSO
неправильная позиция для кнопки-картинки

неправильная позиция для кнопки-картинки

Решил заморочаться с голосовым вводом, нашёл картинку в интернете, подключил(предварительно скачав), подогнал по размерам с помощью скрипта...

268
Как разместить четыре картинки &quot;квадратом&quot; внутри секции?

Как разместить четыре картинки "квадратом" внутри секции?

Есть такая секция в учебном макете:

288
Как заменить div на другой, с его увеличением и при этом затемненить фон страницы?

Как заменить div на другой, с его увеличением и при этом затемненить фон страницы?

Помогите, пожалуйста решить огроменную проблему(( нужно заменить блок при клике на другой, чтобы он стал больше и при этом выехал на середину...

257
Выделить модальное окно полужирным шрифтом и выделить цветом

Выделить модальное окно полужирным шрифтом и выделить цветом

Нужно в модальном окне выделить текст полужирным шрифтом и выделить желтым цветом:

118