Показать последний проверенный + еще два (из массива)

Question

У меня есть вопросник из 20 флажков, извлеченных из файла JSON в массив.

Когда элемент отмечен, я sh ставлю значение вопроса в массив [1,3], который также хранит в поваре ie - поэтому, когда пользователь возвращается, вопросы 1 + 3 остаются отмеченными.

var questions = ["1", "2", "3" ... "20"];

jQuery(this).change(function() {
    var question_value = jQuery(this).val();

    if (jQuery(this).is(':checked')) {
        Cookies.set('completed', questions_completed);
        questions_completed.push(question_value);
    } else {
        // splice/remove the item from the array    
    }
});

var questions_completed = [1, 3]; // stores checked/completed questions number

Я хочу показать 3 флажка за раз (не все 20).

Последний вопрос появляется вверху (отмечен), а затем еще два вопроса из списка (не отмечены), пока не будут заполнены все вопросы.

Я не могу понять, как правильно подойти к этому - мне нужно для сравнения завершенного массива с массивом вопросов, но я не могу этого сделать, создавая несколько циклов внутри циклов.

Answer 1

Чтобы получить вопросы без ответов, вы можете использовать разницу двух массивов, например:

let questions = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let answered = [1, 5, 6, 9];

function getUnansweredQuestions(n = 3){
  let unanswered = questions.filter(x => !answered.includes(x));
  
  if(typeof n == "number" && n > 0){
    unanswered = unanswered.slice(0, n);
  }
  
  return unanswered;
}

console.log(getUnansweredQuestions());

Чтобы получить последний отвеченный вопрос и следующие два неотвеченных вопроса, вы можете сохранить последний отвеченный вопрос и добавить его к неотвеченным:

let last_answered = null;

jQuery(this).change(function() {
    var question_value = jQuery(this).val();
    // ...
    last_answered = question_value;
});

let questions = getUnansweredQuestions(2).push(last_answered);

Обратите внимание, что если вы хотите отслеживать порядок, когда пользователь снимает отметку с одного из ваших вопросов, используйте массив вместо одного значения last_answered. Затем вы можете добавлять вопросы в порядке получения ответов. (На данный момент ваш questions_completed именно такой, если вы не измените порядок. Это означает, что вы можете просто использовать questions_completed[-1] или questions_completed[questions_completed.length - 1], чтобы получить последний ответ на вопрос.)

С этим похоже, вы можете заполнить форму вопроса:

let json_questions = {1: "A?", 2: "B?", 3: "C?", 4: "D?", 5: "E?", 6: "F?", 7: "G?"}
let questions = Object.keys(json_questions);
let answered = [];
let questions_completed = [];

function getUnansweredQuestions(n){
  let unanswered = questions.filter(x => !questions_completed.includes(x));
  
  if(typeof n == "number" && n > 0){
    unanswered = unanswered.slice(0, n);
  }
  
  return unanswered;
}

function createQuestion(id, label, value, checked){
  return ("<div class='question'>" + 
      "<label for='" + id + "'>" + 
        label + 
      "</label>" + 
      "<input " + 
        "value='" + value + "' " + 
        "type='checkbox' " + 
        "id='" + id + "' " + 
        "class='question' " + 
        (checked ? " checked='checked'" : "") + 
        " />" + 
    "</div>");
}

function createQuestions(){
  let n = 3;
  let html = "";
  if(questions_completed.length > 0){
    let last = questions_completed[questions_completed.length - 1];
    html += createQuestion(last, json_questions[last], last, true);
    n--;
  }
  
  let ask = getUnansweredQuestions(n);
  for(let i = 0; i < ask.length; i++){
    html += createQuestion(ask[i], json_questions[ask[i]], ask[i], false);
  }
  
  $(".questions").html(html);
}

$(document).ready(function(){
  $(document).on("change", ".question", function(){
      var question_value = $(this).val();
      if ($(this).is(':checked')) {
          // Cookies.set('completed', questions_completed);
          questions_completed.push(question_value);
      } else {
        let i = questions_completed.indexOf(question_value);
        if(i >= 0){
          questions_completed.splice(i, 1);
        }
      }
    createQuestions();
  });
  createQuestions();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="questions"></div>