Question 246468 in Html Question posted in
Some basic documentation can be found here.

Html – Best approach to create a long multi-step form

I have a questionnaire with 100 yes/no questions that are separated by 3 sections, and that I need to implement on a website. The goal is to create a multi-step form (each question will appear at a time) and then handled the answers of the users (PHP or Node.js will be used to handle the data).

I don’t think that create a form with 100 labels and inputs into the html file is a good approach. So, since the form is too long should I create an array of questions in the javascript file and insert them dinamically into the html file?

Since the questions are separated by 3 sections I assume that an array of objects will fit:

const questions = [
{ text: "Question 1", section: "Section 1" },
{ text: "Question 2", section: "Section 1" },
{ text: "Question 3", section: "Section 1" },
{ text: "Question 4", section: "Section 2" },
{ text: "Question 5", section: "Section 2" },
{ text: "Question 6", section: "Section 2" },
{ text: "Question 7", section: "Section 3" },
{ text: "Question 8", section: "Section 3" },
{ text: "Question 9", section: "Section 3" },
];

Is this a good approach? Or should I create all the labels and inputs in the html file?

Tags:

2

Answers


  1. 0

    Creating an array of questions in JavaScript and dynamically inserting them into the HTML file is indeed a good approach for handling a long questionnaire with multiple sections. This approach allows for better organization and maintainability of your code.

    By using an array of objects like the one you provided, you can easily iterate over the questions and dynamically generate the form elements in the HTML file. This approach will reduce the amount of repetitive code in your HTML file and make it easier to add, remove, or modify questions in the future.

    Here’s an example of how you can use the questions array to dynamically generate the form elements using JavaScript:

    const form = document.querySelector('#myForm');

questions.forEach(question => {
  const label = document.createElement('label');
  label.textContent = question.text;

  const input = document.createElement('input');
  input.type = 'checkbox'; // or 'radio' for yes/no options
  input.name = question.section; // use section as the name for grouping questions

  form.appendChild(label);
  form.appendChild(input);
  form.appendChild(document.createElement('br')); // add a line break between questions
});

    In this example, we’re using the forEach method to iterate over each question object in the questions array. For each question, we create a <label> element with the question text and an <input> element for the user’s response. We then append these elements to the form.

    By using this approach, you can easily manage and modify the questions in the questions array without having to manually update the HTML file. This can save you time and make your code more maintainable.

    Remember to adjust the code according to your specific requirements and styling preferences.

    Login or Signup to reply.
  2. 0

    I would instead structure it as an array of sections, and then each section has questions instead of having a section key on every single question.

    This way you can have a bit more data for each section, like a name, description, etc. It’s also easier in code to tell when you are in between sections too in case you wanted to change the UI or something.

    const questionSections = [
  {
    name: 'Section 1',
    description: 'This section is about...',
    questions:[
      { text: "Question 1" ... },
      { text: "Question 2" ... },
      { text: "Question 3" ... },
    ]
  },
  {
    name: 'Section 2',
    description: 'This section is about...',
    questions:[
      { text: "Question 4" ... },
      { text: "Question 5" ... },
      { text: "Question 6" ... },
    ]
  },
  {
    name: 'Section 3',
    description: 'This section is about...',
    questions:[
      { text: "Question 7" ... },
      { text: "Question 8" ... },
      { text: "Question 9" ... },
    ]
  },
];

    There’s no reason you couldn’t do the exact same thing in PHP as well. The data can have the same structure in either language, it just depends on which one is the better choice for your needs or possibly how you want the UI to be built.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search