html - Add images in options and questions in javascript -
i trying create online quiz. created basic javascript quiz not able add images in questions , options. how add images questions , answers? want embed quiz front end. not getting how that? below javascript quiz. please tell me how add images in question , answer. sample images added appreciated. in advance.
<html> <head> <meta charset="utf-8"> <style> div#test{ border:#000 1px solid; padding:10px 40px 40px 40px; } </style> <script> var pos = 0, test, test_status, question, choice, choices, cha, chb, chc, correct = 0; var questions = [ [ "what 10 + 4?", "12", "14", "16", "b" ], [ "what 20 - 9?", "7", "13", "11", "c" ], [ "what 7 x 3?", "21", "24", "25", "a" ], [ "what 8 / 2?", "10", "2", "4", "c" ] ]; function _(x){ return document.getelementbyid(x); } function renderquestion(){ test = _("test"); if(pos >= questions.length){ test.innerhtml = "<h2>you got "+correct+" of "+questions.length+" questions correct</h2>"; _("test_status").innerhtml = "test completed"; pos = 0; correct = 0; return false; } _("test_status").innerhtml = "question "+(pos+1)+" of "+questions.length; question = questions[pos][0]; cha = questions[pos][1]; chb = questions[pos][2]; chc = questions[pos][3]; test.innerhtml = "<h3>"+question+"</h3>"; test.innerhtml += "<input type='radio' name='choices' value='a'> "+cha+"<br>"; test.innerhtml += "<input type='radio' name='choices' value='b'> "+chb+"<br>"; test.innerhtml += "<input type='radio' name='choices' value='c'> "+chc+"<br><br>"; test.innerhtml += "<button onclick='checkanswer()'>submit answer</button>"; } function checkanswer(){ choices = document.getelementsbyname("choices"); for(var i=0; i<choices.length; i++){ if(choices[i].checked){ choice = choices[i].value; } } if(choice == questions[pos][4]){ correct++; } pos++; renderquestion(); } window.addeventlistener("load", renderquestion, false); </script> </head> <body> <h2 id="test_status"></h2> <div id="test"></div> </body> </html>
you can use "img" html tag , specify path of image show question , option images.
<html> <head> <meta charset="utf-8"> <style> div#test{ border:#000 1px solid; padding:10px 40px 40px 40px; } </style> <script> var pos = 0, test, test_status, question, choice, choices, cha, chb, chc, correct = 0; var questions = [ [ "what 10 + 4? <br> <img src='http://batr.org/sitebuildercontent/sitebuilderpictures/quiz_icon.gif'/>", "12   <img src='http://batr.org/sitebuildercontent/sitebuilderpictures/quiz_icon.gif' height=30px width=30px/>", "14", "16", "b" ], [ "what 20 - 9?", "7", "13", "11", "c" ], [ "what 7 x 3?", "21", "24", "25", "a" ], [ "what 8 / 2?", "10", "2", "4", "c" ] ]; function _(x){ return document.getelementbyid(x); } function renderquestion(){ test = _("test"); if(pos >= questions.length){ test.innerhtml = "<h2>you got "+correct+" of "+questions.length+" questions correct</h2>"; _("test_status").innerhtml = "test completed"; pos = 0; correct = 0; return false; } _("test_status").innerhtml = "question "+(pos+1)+" of "+questions.length; question = questions[pos][0]; cha = questions[pos][1]; chb = questions[pos][2]; chc = questions[pos][3]; test.innerhtml = "<h3>"+question+"</h3>"; test.innerhtml += "<input type='radio' name='choices' value='a'> "+cha+"<br>"; test.innerhtml += "<input type='radio' name='choices' value='b'> "+chb+"<br>"; test.innerhtml += "<input type='radio' name='choices' value='c'> "+chc+"<br><br>"; test.innerhtml += "<button onclick='checkanswer()'>submit answer</button>"; } function checkanswer(){ choices = document.getelementsbyname("choices"); for(var i=0; i<choices.length; i++){ if(choices[i].checked){ choice = choices[i].value; } } if(choice == questions[pos][4]){ correct++; } pos++; renderquestion(); } window.addeventlistener("load", renderquestion, false); </script> </head> <body> <h2 id="test_status"></h2> <div id="test"></div> </body> </html>
Comments
Post a Comment