Как перегруппировать этот JS код?

Question

[dim5on]

Имеется код:

<ol>
    <script>
        for(var q=0; q<questions.length; ++q) {
        var question = questions[q];
        var idx = 1 + q;
        document.writeln('<li class="test-li"><span class="quest quote__main">' + question.text + '</span><br/>');
                for(var i in question.answers) {
                document.writeln('<input type=radio name="q' + idx + '" value="' + i + '" onClick="Engine(' + q + ', this.value)"  id="test-radio">' + question.answers[i] + '<br/>');
     }
}
    </script>
</ol>

Как функцию которая формирует список вынести в файл js а сам список что бы формировался через переменную или функцию и подгружался с файла .js

Answer 1

[gleendo]

// Что то типа этого...но это дико ужасно. Вам явно нужно задуматься над другой реализацией. 
// Хотя бы используйте шаблонизатор какой нибудь.
const list = document.querySelector("ol");

const createList = (list, questions) => {
  for (let i = 0; i < questions.length; i += 1) {
    let question = questions[i];
    let index = i + 1;
  
    let li = document.createElement("li");
    let span = document.createElement("span");
  
    li.classList.add("test-li");
    span.classList.add("quest quote__main");
  
    span.textContent = question.text;
  
    li.appenChild(span);
  
    list.appendChild(li)
  
    for (let answer in question.answers) {
      let input = document.createElement("input");
  
      input.setAttribute("type", "radio");
      input.setAttribute("name", `i${index}`);
      input.setAttribute("id", "test-radio");
      input.value = answer;
      input.textContent = question.answers[answer];
  
      input.addEventListener("click", event => {
        engine(i, event.target.value);
      }, false);
  
      list.appendChild(input);
    }
  }
};

createList(list, questions);

Answer 2

[Interface]

Есть примерно такой вариант, но вообще есть ряд проблем (неуникальные id, куча onclick'ов и т.д.)

<ol>
    <script>
        const renderAnswer = (questionId, [id, answer]) => `
            <input 
                type="radio"
                name="q${questionId + 1}"
                value="${id}"
                onClick="Engine(${questionId}, this.value)"
                id="test-radio"
            />
            ${answer}
            <br/>
        `;

        const renderQuestion = (question, id) => `
            <li class="test-li">
                <span class="quest quote__main">
                    ${question.text}
                </span>
                <br/>
                ${
                    Object
                        .entries(question.answers)
                        .map(renderAnswer.bind(null, id))
                        .join('')
                }
        `;

        questions=[
            {answers: {a: 'a option', b: 'b option'}, text: 'foo'},
            {answers: {c: 'c option', d: 'd option'}, text: 'boo'},
        ];

        document.writeln(questions.map(renderQuestion).join(''));
    </script>
</ol>

P.s. при таком подходе будет кривое форматирование генерируемого кода