current position:Home>How to design test papers freely according to your own needs in HTML

How to design test papers freely according to your own needs in HTML

2022-02-02 21:49:53 CSDN Q & A

Fixed content test paper, I will , But how can I design freely ? You can choose to add a multiple-choice question according to your needs , Add more topics , Judgment questions, etc




Refer to the answer 1:

In fact, the templates are the same , The radio , multi-select , Judge ( It's actually a single choice ), Generate according to the type of problem radio( The radio ) still checkbox( multi-select ) That's it .
It is mainly about the design of the question type and how to display , Then the front desk generates the title according to the background type Just generate the corresponding content
A simple example is as follows

img

<script> var questions = [ { type: 1,id:1, title: ' Single choice question 1', answers: [{ 
     id: '1', title: ' Single choice question 1-- Options 1' }, { 
     id: '2', title: ' Single choice question 1-- Options 2' }, { 
     id: '3', title: ' Single choice question 1-- Options 3' }/* More options */] }, { type: 2, id: 2, title: ' Multiple choice questions 1', answers: [{ 
     id: '1', title: ' Multiple choice questions 1-- Options 1' }, { 
     id: '2', title: ' Multiple choice questions 1-- Options 2' }, { 
     id: '3', title: ' Multiple choice questions 1-- Options 3' }/* More options */] }, { type: 3, id: 3, title: ' Judgment questions 1' }, { type: 2, id: 4, title: ' Multiple choice questions 2', answers: [{ 
     id: '1', title: ' Single choice question 2-- Options 1' }, { 
     id: '2', title: ' Single choice question 2-- Options 2' }, { 
     id: '3', title: ' Single choice question 2-- Options 3' }/* More options */] }, { type: 2, id: 5, title: ' Multiple choice questions 3', answers: [{ 
     id: '1', title: ' Multiple choice questions 3-- Options 1' }, { 
     id: '2', title: ' Multiple choice questions 3-- Options 2' }, { 
     id: '3', title: ' Multiple choice questions 3-- Options 3' }/* More options */] }, { type: 3, id: 6, title: ' Judgment questions 2' }, ]; var s = questions.map(q => { let s = ''; switch (q.type) { case 1: s += `<li>${q.title}</li>`;                s += '<ul>'                s += q.answers.map(a => `<input type="radio" name="q${q.id}" value="${a.id}"/>${a.title}`).join('<br>')                s += '</ul>'                break;            case 2:                s += `<li>${q.title}</li>`;                s += '<ul>'                s += q.answers.map(a => `<input type="checkbox" name="q${q.id}" value="${a.id}"/>${a.title}`).join('<br>')                s += '</ul>'                break;            case 3:                s += `<li>${q.title}</li>`;                s += '<ul>'                s += `<input type="radio" name="q${q.id}" value="1"/> correct  <input type="radio" name="q${q.id}" value="0"/> error `                s += '</ul>'                break;        }        return s;    }).join('<br>');    document.write(s);</script>

img

Helpful or enlightening. Please click here 【 Adopt the answer 】, thank you ~~ If you have other questions, you can continue to communicate ~




Refer to the answer 2:



Refer to the answer 3:

This should be combined with the backstage , Dynamically obtain data to achieve .
Reference resources :
https://edu.csdn.net/course/detail/10321

https://edu.csdn.net/course/detail/6960




Refer to the answer 4:



Refer to the answer 5:

I've just done this test paper ^.^

Something very complicated , How can a question and answer be solved .
It's basically docking the back end , Get test paper information , Traverse and render different question types wait ...




Refer to the answer 6:

copyright notice
author[CSDN Q & A],Please bring the original link to reprint, thank you.
https://en.primo.wiki/2022/02/202202022149514532.html

Random recommended