Create a multiple choice layout dynamically using a string

I want to create a multiple choice graphic using this string:

const text = `This is the body of the question? 1) this is the option one 2) this is the option two 

3) this is the option three 
4) this is the option four
`;

So I need to give each option a structure like this probably:

<p class="block">1) this is the option 1</p>

So I want to automatically create these p tags to have the layout of multiple choice question.

But the issue is I can't find a solution to simply differentiate each option! The code should look like this:

const content = document.getElementById('content');

const text = `This is the body of the question? 1) this is the option one 2) this is the option two 

3) this is the option three 
4) this is the option four
`;

let render = '';
render += getSpans(text);
content.innerHTML = render;

function getSpans(text) {
    let result = text;
  result.replace( replace each option with new structure, '<p class="option"></pn>');

  return result;
}
.option {
  color: red;
  display: block;
}
<div id="content"></div>

Note that always we have options like 1) some text 2) some text etc...

NOTE: I need it to be a simple string as the question insist on..

2 answers

  • answered 2021-05-03 18:01 John Tyner

    Not sure what your final goal is, but if you just want to add paragraph tags like you mentioned, one way to do it is split the string by line breaks, then rebuild it with

    tags:

    function getSpans(text) {
        let result = text.split("\n");
        let output='';
        result.forEach(item => { output += "<p>" + item + "</p>"; });
        return output;
    }
    

  • answered 2021-05-03 18:05 WOUNDEDStevenJones

    I'd recommend using structured data to define your question instead of a single string. If you define your question data as an object, then you can easily get the question text and options by accessing the keys directly and iterating over the options. Additionally, you'll be able to define the correct answer by adding another key to question like 'correct': 2 for future use.

    const content = document.getElementById('content');
    
    const question = {
      'text': "This is the body of the question?",
      'options': [
        "this is the option 1",
        "this is the option 2",
        "this is the option 3",
        "this is the option 4"
      ]
    }
    
    let render = renderQuestion(question);
    content.innerHTML = render;
    
    function renderQuestion(data) {
      let result = '<p>' + data['text'] + '</p>';
      data['options'].forEach(
        element => result += '<p class="option">' + element + '</p>'
      );
    
      return result;
    }
    .option {
      color: red;
      display: block;
    }
    <div id="content"></div>

    But if you absolutely need to parse the string, you can split on the regex /(\d\) )/ (a digit, a closing parenthesis, a space). Then the first part will be the question text, then every other part will be an option (starting with index 2).

    const content = document.getElementById('content');
    
    const question = `This is the body of the question? 1) this is the option one 2) this is the option two 
    
    3) this is the option three 
    4) this is the option four
    `;
    
    let render = renderQuestion(question);
    content.innerHTML = render;
    
    function renderQuestion(data) {
      let parts = data.split(/(\d\) )/);
      result = '<p>' + parts[0] + '</p>';
    
      for (let i = 2; i < parts.length; i += 2) {
        result += '<p class="option">' + parts[i].trim() + '</p>';
      }
    
      return result;
    }
    .option {
      color: red;
      display: block;
    }
    <div id="content"></div>