I am going to develop multiple choice quiz submitting project and i have create a form where user can submit these input with form quiz title, banner, description, quiz_category, quiz_language and more with 1 question and 4 option field
I have Use Tailwind CSS, Node JS, Express JS, and Java Script
var quizNo = 1;
addQuiz()
function addQuiz() {
// Here i Will Store Quiz Option Input Box
var h = document.getElementById("question");
var quiz_container = '<div id="question_' + quizNo + '" > ' +
' <div class="flex flex-wrap" > ' +
' <div class="w-full lg:w-full px-4"> ' +
' <div class="relative w-full mb-3"> ' +
' <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2 py-3" htmlFor="grid-password"> ' +
' Quiz Question ' +
' </label> ' +
'<input type="text" name="quiz_question_' + quizNo + '" ' +
' class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" ' +
' placeholder="Enter Quiz Question" /> ' +
' <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2 py-3" htmlFor="grid-password"> ' +
' Quiz Option ' +
' </label> ' +
' <div class="grid grid-cols-2 gap-2 my-4 mt-0"> ' +
' <div> ' +
' <input type="text" name="quiz_option_1_' + quizNo + '" ' +
' class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" ' +
' placeholder="Enter Option 1" /> ' +
' </div> ' +
' <div> ' +
' <input type="text" name="quiz_option_2_' + quizNo + '" ' +
' class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" ' +
'placeholder="Enter Option 2" /> ' +
'</div> ' +
'</div> ' +
'<div class="grid grid-cols-2 gap-2 my-4 mb-0"> ' +
'<div> ' +
'<input type="text" name="quiz_option_3_' + quizNo + '" ' +
'class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" ' +
'placeholder="Enter Option 3" /> ' +
'</div>' +
'<div> ' +
'<input type="text" name="quiz_option_4_' + quizNo + '" ' +
'class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" ' +
'placeholder="Enter Option 4" /> ' +
' </div> ' +
' </div> ' +
'</div>' +
'</div>' +
'</div > ' +
'</div>';
quizNo += 1;
h.insertAdjacentHTML("afterend", quiz_container);
document.getElementById("total_quiz").setAttribute("value", quizNo);
}<input type="hidden" name="total_quiz" value="" id="total_quiz" />
<div id="question">
</div>
<input type="button" onclick="addQuiz()" value="Add Quiz" class="float-right text-pink-500 bg-transparent border border-solid border-pink-500 hover:bg-pink-500 hover:text-white active:bg-pink-600 font-bold uppercase text-xs px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150">After Submitting The Form I am Getting Data Like This
Mine JSON Object is
{
quiz_title: 'Simple quiestion',
quiz_desc: 'Enter Quiz Description Here',
total_quiz : '4',
quiz_question: 'question title 1',
quiz_option_1: 'opt 1',
quiz_option_2: 'opt 2',
quiz_option_3: 'opt 3',
quiz_option_4: 'opt 4',
quiz_question_2: 'question title 3',
quiz_option_1_2: 'opt 1',
quiz_option_2_2: 'opt 2',
quiz_option_3_2: 'opt 3',
quiz_option_4_2: 'opt 4',
quiz_question_1: 'question title 2',
quiz_option_1_1: 'opt 1',
quiz_option_2_1: 'opt 2',
quiz_option_3_1: 'opt 3',
quiz_option_4_1: 'opt 4',
quiz_cat: 'basic_computer',
quiz_lang: 'hindi',
submit: 'Submit'
}
Now I Want To Get Like This Schema
var quiz = [{
id: i,
question: question,
option: [{
option_1: option_1,
option_2: option_2,
option_3: option_3,
option_4: option_4
}],
answer : (req.body.quiz_answer + "_" + i)
}];
And I am Trying Something Like This Please Help Me
console.log(req.body);
var total_quiz = req.body.total_quiz ;
var all_quiz;
var question, option_1, option_2, option_3, option_4;
for(var i = 1; i <= total_quiz - 1; i++) {
question = req.body[quiz_question + "_" + i]
option_1 = req.body.quiz_option_1 + "_" + i;
option_2 = req.body.quiz_option_2 + "_" + i;
option_3 = req.body.quiz_option_3 + "_" + i;
option_4 = req.body.quiz_option_4 + "_" + i;
console.log(question, option_1, option_2, option_3, option_4);
var quiz = [{
id: i,
question: question,
option: [{
option_1: option_1,
option_2: option_2,
option_3: option_3,
option_4: option_4
}],
answer : (req.body.quiz_answer + "_" + i)
}];
console.log(quiz);
all_quiz.push(quiz)
}
Basically I am new in JSON Project And Thanks In Advance, For Helping Me
You say you have the JSON object described, but you appear to be trying to read that data from a variable called req.body, which is not where I'd expect to find that data normally - but you don't show us the code that puts it there. So, assuming that your req.body variable actually contains the JSON output as shown...
It looks like you're really close. You just need to clean up that code a little bit. For starters, initialize your all_quiz variable to be an empty array:
var all_quiz = [];
Then, all the expressions for the input values need to be fixed, like this:
question = req.body["quiz_question_" + i];
option_1 = req.body["quiz_option_1_" + i];
// ... etc.
Finally, you don't need the value of your quiz variable to be an array - just make it a plain object:
var quiz = {
id: i,
// ... etc.
};