How to create multiple choice question test using C#,Mysql and Jquery

Question

Hello Team, Can any one guide me on creating multiple choice question and answer test template with datalist and radiobutton list. Need to get the question and answer from DB. Answering of question need to validation with Jquery. Looking forward to hear from you. Thank you in advance!!

Sachin Singh · Answer

The below code was working fine, you just need to retrieve data from database and thats it. "~/Scripts/jquery-3.4.1.min.js" > body { font-size : 20px ; font-family : sans-serif ; color : #333 ; } .question { font-weight : 600 ; } .answers { margin-bottom : 20px ; } .answers label { display : block ; } #submit { font-family : sans-serif ; font-size : 20px ; background-color : #279 ; color : #fff ; border : 0px ; border-radius: 3px ; padding : 20px ; cursor : pointer ; margin-bottom : 20px ; } #submit :hover { background-color : #38a ; } "quiz" > "submit" >Submit Quiz "results" > "startQuiz()" >start Quiz (function () { const quizContainer = document.getElementById( 'quiz' ); const resultsContainer = document.getElementById( 'results' ); const submitButton = document.getElementById( 'submit' ); const myQuestions = [ { question: "Who invented JavaScript?" , answers: { a: "Douglas Crockford" , b: "Sheryl Sandberg" , c: "Brendan Eich" }, correctAnswer: "c" }, { question: "Which one of these is a JavaScript package manager?" , answers: { a: "Node.js" , b: "TypeScript" , c: "npm" }, correctAnswer: "c" }, { question: "Which tool can you use to ensure code quality?" , answers: { a: "Angular" , b: "jQuery" , c: "RequireJS" , d: "ESLint" }, correctAnswer: "d" } ]; function buildQuiz(){ // variable to store the HTML output const output = []; myQuestions.forEach(function (currentQuestion, questionNumber) { const answers = []; // and for each available answer... for (letter in currentQuestion.answers) { debugger; // ...add an HTML radio button answers.push( " " + " +questionNumber+' " +" value= '+letter+"' >"+ letter + ":" + currentQuestion.answers[letter]+ "}" + " " ); } // add this question and its answers to the output output.push( " " + currentQuestion.question+ " " + " " + answers.join( '' )+ " " ); }) // finally combine our output list into one string of HTML and put it on the page quizContainer.innerHTML = output.join( '' ); } function showResults(){ // gather answer containers from our quiz const answerContainers = quizContainer.querySelectorAll( '.answers' ); // keep track of user's answers let numCorrect = 0 ; // for each question... myQuestions.forEach(function (currentQuestion, questionNumber) { // find selected answer const answerContainer = answerContainers[questionNumber]; const selector = "input[name=question" + questionNumber + "]:checked" ; const userAnswer = (answerContainer.querySelector(selector) || {}).value; // if answer is correct if (userAnswer === currentQuestion.correctAnswer) { // add to the number of correct answers numCorrect++; // color the answers green answerContainers[questionNumber].style.color = 'lightgreen' ; } // if answer is wrong or blank else { // color the answers red answerContainers[questionNumber].style.color = 'red' ; } }); // show number of correct answers out of total resultsContainer.innerHTML = numCorrect + "out of " + myQuestions.length; } // Kick things off buildQuiz(); // Event listeners submitButton.addEventListener( 'click' , showResults); })();

Ashutosh Gupta · Answer

https://www.c-sharpcorner.com/article/quiz-application-with-asp-net-mvc-5/

Mageshwaran R · Answer

Hi Sam, please refer this link, https://www.youtube.com/watch?v=cokqCM-z3dg

Sam · Answer

@sachin. Thank you for your response, Can you please guide me on ritriving the data from DB please. Bit urgent.

Sam · Answer

Hi Rajanikant, Can you please guide me without using MVC. Looking forward to hear form you!!

Rajanikant Hawaldar · Answer

https://www.c-sharpcorner.com/article/quiz-application-with-asp-net-mvc-5/