• Как сделать прогресс бар для опросника с разными ответами в зависимости от вопроса и его ответа на alpine js?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Добавить счётчик полученных ответов, делать ему +/- 1 при переходах к следующему/предыдущему вопросу.

    При расчёте прогресса проверять, что текущий вопрос последний (т.е., список возможных следующих вопросов пуст), в зависимости от результата проверки возвращать чего там вам надо - сразу 100 или умножаете счётчик ответов на 10 (кстати, уверены, что больше девяти вопросов задано не будет?).

    UPD. Как избавиться от этой ерунды с умножением на 10 - давайте будем вычислять максимальное количество вопросов, которые ещё могут быть заданы. Тогда текущий прогресс будет выражаться отношением количества отвеченных вопросов к сумме отвеченных и оставшихся.

    А ещё давайте избавимся от поиска вопросов по их id - для этого следующие/предыдущие вопросы надо хранить в виде индексов вместо id, или вместо массива вопросов сделать объект, где ключами будут id.

    Как это может выглядеть:

    Рекурсия есть:

    getMaxQuestionsLeft(question, depth) {
      return Math.max(
        depth,
        ...question.nextQuestions.map(n => {
          return this.getMaxQuestionsLeft(this.questions[n], depth + 1);
        })
      );
    },
    get progress() {
      const ac = this.answersCount;
      return Math.floor(ac / (ac + this.getMaxQuestionsLeft(this.question, 0)) * 100);
    },

    Или, рекурсии нет:

    get maxQuestionsLeft() {
      let result = 0;
    
      for (const stack = [ [ this.question, 0 ] ]; stack.length;) {
        const [ q, d ] = stack.pop();
        result = Math.max(result, d);
        stack.push(...q.nextQuestions.map(n => [ this.questions[n], -~d ]));
      }
    
      return result;
    },
    get progress() {
      const { answersCount: ac } = this;
      return ac / (ac + this.maxQuestionsLeft) * 100 | 0;
    },
    Ответ написан
    2 комментария