Experimental questions flow

by m4xout

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Questionnaire</title>
  <style>
    .question {
      font-weight: bold;
    }
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <h1>Questionnaire</h1>

  <div id="questionnaire"></div>

  <button id="submitBtn">Submit</button>

  <div id="answers"></div>

  <script>
    const questions = [
      { question: 'How are you feeling today out of 5?', type: 'radio', options: ['1', '2', '3', '4', '5'] },
      { question: 'What is the primary reason for feeling like this?', type: 'text', hidden: true },
      { question: 'What are the main factors for feeling this?', type: 'checkbox', options: ['1', '2', '3', '4', '5'], hidden: true },
      { question: 'What is your name?', type: 'text' },
      { question: 'How old are you?', type: 'number' },
      { question: 'Are you a student?', type: 'checkbox' },
      { question: 'Select your favorite color:', type: 'select', options: ['Red', 'Blue', 'Green'] }
    ];

    function createQuestionnaire() {
      const container = document.getElementById('questionnaire');

      questions.forEach((q, index) => {
        const questionContainer = document.createElement('div');
        questionContainer.classList.add('question');
        questionContainer.textContent = q.question;

        let inputElement;

        if (q.type === 'checkbox') {
          if (q.hidden) {
            questionContainer.classList.add('hidden');
          }

          inputElement = document.createElement('div');
          inputElement.setAttribute('id', `question-${index}`);

          q.options.forEach(option => {
            const optionContainer = document.createElement('div');

            const checkboxElement = document.createElement('input');
            checkboxElement.setAttribute('type', 'checkbox');
            checkboxElement.setAttribute('name', `question-${index}`);
            checkboxElement.setAttribute('value', option);

            const labelElement =...