Bundled Learning Inpage Questions: Default

import { Rive, Fit, Layout } from '@rive-app/canvas';

export default parentElement => {
  const closeBtn = parentElement.querySelector(
    '.bundled-learning-inpage-question__close'
  );

  const swithScreen = (screen, question) => {
    const allSteps = question.querySelectorAll(
      '.bundled-learning-inpage-question__questions--steps'
    );
    const activeStep = question.querySelector(`.${screen}`);

    allSteps.forEach(steps => {
      steps.classList.add('hidden');
    });
    activeStep.classList.remove('hidden');
  };

  const feedback = question => {
    const allOptions = question.querySelectorAll('input');
    const optionContainer = question.querySelector('.option-container');
    const selectedAnswers = [];
    const getCorrectAnswer = JSON.parse(optionContainer.dataset.answer);
    const correctAnswer = getCorrectAnswer.filter(item => item);
    const rightfeedbackCanvas = question.querySelector('.right-canvas');
    const wrongfeedbackCanvas = question.querySelector('.wrong-canvas');
    const lyout = new Layout({
      fit: Fit.Cover,
    });

    const rightAnimation = new Rive({
      src: '/assets/example-content/quiz-correct-feedback.riv',
      canvas: rightfeedbackCanvas,
      layout: lyout,
      onLoad: () => {
        rightAnimation.resizeDrawingSurfaceToCanvas();
      },
    });
    const wrongAnimation = new Rive({
      src: '/assets/example-content/quiz-incorrect-feedback.riv',
      canvas: wrongfeedbackCanvas,
      layout: lyout,
      onLoad: () => {
        wrongAnimation.resizeDrawingSurfaceToCanvas();
      },
    });

    allOptions.forEach(option => {
      if (option.checked) {
        selectedAnswers.push(option.value);
      }
    });

    if (
      selectedAnswers.length === correctAnswer.length &&
      selectedAnswers.every(answer => correctAnswer.includes(answer))
    ) {
      rightAnimation.play('Correct');
      swithScreen('step2', question);
    } else {
      wrongAnimation.play('Incorrect');
      swithScreen('step3', question);
    }
  };

  // Accessibility
  const updateTabIndex = () => {
    const allInputs = parentElement.querySelectorAll('input');

    allInputs.forEach(element => {
      if (element.type === 'radio') {
        // eslint-disable-next-line no-param-reassign
        element.nextElementSibling.tabIndex = '0';
      }
    });
  };

  const updateOptLabel = () => {
    const questionElement = parentElement.querySelector('.question');
    const questionText = questionElement.innerText;
    const answerOptions = parentElement.querySelectorAll('input');
    const firstOpt = answerOptions[0];
    const optLabel = firstOpt.nextElementSibling;
    const optText = optLabel.innerText;

    if (firstOpt.type === 'checkbox') {
      firstOpt.setAttribute('aria-label', `${questionText} ${optText}`);
    } else if (firstOpt.type === 'radio') {
      optLabel.setAttribute('aria-label', `${questionText} ${optText}`);
    }
  };

  window.addEventListener('click', e => {
    const clickedElement = e.target;

    if (clickedElement.tagName === 'INPUT') {
      const question = clickedElement.closest(
        '.bundled-learning-inpage-question'
      );

      if (!question) {
        return;
      }

      const inputs = question.querySelectorAll('input');
      const submitCta = question.querySelector('.cta.cta--efl.submit');

      if (clickedElement.type === 'checkbox') {
        let answered = false;

        inputs.forEach(element => {
          if (element.checked) {
            answered = true;
          }
        });
        if (answered === true) {
          question.setAttribute('data-answered', 'true');
          submitCta.setAttribute('aria-disabled', 'false');
        } else {
          question.setAttribute('data-answered', 'false');
          submitCta.setAttribute('aria-disabled', 'true');
        }
      } else if (clickedElement.type === 'radio') {
        question.setAttribute('data-answered', 'true');

        feedback(question);
      }

      if (submitCta) {
        submitCta.addEventListener('click', event => {
          event.preventDefault();

          feedback(question);

          const allInputs = question.querySelectorAll('input, a');

          allInputs.forEach(element => {
            // eslint-disable-next-line no-param-reassign
            element.tabIndex = '-1';
            if (element.type === 'radio' || element.type === 'checkbox') {
              // eslint-disable-next-line no-param-reassign
              element.nextElementSibling.tabIndex = '-1';
            }
          });

          closeBtn.focus();
        });
        submitCta.addEventListener('keydown', event => {
          if (event.keyCode === 13) {
            event.preventDefault();
            submitCta.click();
          }
        });
      }

      const { inpageQuestionId } = question.dataset;
      let inPageQuestion = [];
      const newQuestionId = `{"id": "${inpageQuestionId}"}`;

      if (localStorage.getItem('inPageQuestion')) {
        inPageQuestion = JSON.parse(localStorage.getItem('inPageQuestion'));
        const idExist = inPageQuestion.find(val => val.id === inpageQuestionId);

        if (!idExist) {
          inPageQuestion[inPageQuestion.length] = JSON.parse(newQuestionId);
          localStorage.setItem(
            'inPageQuestion',
            JSON.stringify(inPageQuestion)
          );
        }
      } else {
        localStorage.setItem('inPageQuestion', `[${newQuestionId}]`);
      }
    }
  });

  window.addEventListener('keydown', event => {
    if ((event.keyCode === 13 || event.keyCode === 32) && parentElement) {
      const { target } = event;
      const question = target.closest('.bundled-learning-inpage-question');

      if (!question) {
        return;
      }

      if (target.previousElementSibling) {
        if (target.previousElementSibling.type === 'radio') {
          target.click();
          target.focus();
        }
      } else if (target.tagName === 'BUTTON' || target.type === 'checkbox') {
        target.click();
        target.focus();
      }
    }
  });

  closeBtn.addEventListener('click', e => {
    e.preventDefault();
    parentElement.classList.add('hidden');
  });

  closeBtn.addEventListener('keydown', e => {
    if (e.keyCode === 13) {
      e.preventDefault();
      closeBtn.click();
    }
  });

  document.addEventListener('readystatechange', () => {
    if (localStorage.getItem('inPageQuestion')) {
      const questionIds = JSON.parse(localStorage.getItem('inPageQuestion'));

      questionIds.forEach(questionId => {
        if (
          document.querySelector(`[data-inpage-question-id="${questionId.id}"]`)
        ) {
          document
            .querySelector(`[data-inpage-question-id="${questionId.id}"]`)
            .classList.add('hidden');
        }
      });
    }
  });

  updateTabIndex();
  updateOptLabel();
};