在javascript中添加选项和问题中的图像

问题描述：

我正在尝试创建一个在线测验。我创建了一个基本的JavaScript测验，但无法在问题和选项中添加图像。如何将图像添加到问题和答案？另外我想用我的前端嵌入测验。我没有得到如何做到这一点？以下是我的JavaScript测验。请告诉我如何在问题和答案中添加图像。示例图片添加将不胜感激。提前致谢。在javascript中添加选项和问题中的图像

<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 is 10 + 4?", "12", "14", "16", "B" ], 
    [ "What is 20 - 9?", "7", "13", "11", "C" ], 
    [ "What is 7 x 3?", "21", "24", "25", "A" ], 
    [ "What is 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>

答

您可以使用“Img”html标签并指定图像的路径以显示问题和选项图像。

<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 is 10 + 4? <br> <img src='http://batr.org/sitebuildercontent/sitebuilderpictures/quiz_icon.gif'/>", "12 &nbsp <img src='http://batr.org/sitebuildercontent/sitebuilderpictures/quiz_icon.gif' height=30px width=30px/>", "14", "16", "B" ], 
 
    [ "What is 20 - 9?", "7", "13", "11", "C" ], 
 
    [ "What is 7 x 3?", "21", "24", "25", "A" ], 
 
    [ "What is 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>

在javascript中添加选项和问题中的图像

相关推荐