如何在Javascript测验的问答中插入图像？_Javascript_Html

如何在Javascript测验的问答中插入图像？

javascript html

如何在Javascript测验的问答中插入图像？,javascript,html,Javascript,Html,我正在创建一个测验，并希望它以图像为基础，作为问题或回答（任何可行的方法）-例如，用户被问到“这是什么动物”，并且在看到猫的图像后应该选择“猫”按钮我曾尝试将图像标记放入HTML按钮中，但它们没有显示在预览中 HTML: 我已经尝试解决这个问题一段时间了，非常感谢您的帮助：）我想您可以这样做： const问题=[{ 问题：“哪只是猫？”，答复:[{ 文本：“”，正确：正确 }, { 文本：“”，正确：错误 }, { 文本：“”，正确：错误 }, { 文本：“”，正确：错误 } ]

我正在创建一个测验，并希望它以图像为基础，作为问题或回答（任何可行的方法）-例如，用户被问到“这是什么动物”，并且在看到猫的图像后应该选择“猫”按钮

我曾尝试将图像标记放入HTML按钮中，但它们没有显示在预览中

HTML:

我已经尝试解决这个问题一段时间了，非常感谢您的帮助：）

我想您可以这样做：

const问题=[{
问题：“哪只是猫？”，
答复:[{
文本：“”，
正确：正确
},
{
文本：“”，
正确：错误
},
{
文本：“”，
正确：错误
},
{
文本：“”，
正确：错误
}
]
},
{
问题：“哪一个是海马？”，
答复:[{
文本：“”，
正确：错误
},
{
文本：“”，
正确：正确
},
{
文本：“”，
正确：错误
},
{
文本：“有趣的功能”，
正确：错误
}
]
}
]
//如果使用jQuery：
功能检查（选择选项）{
如果（问题[0]。答案[+$（选择选项）。数据（“选项”）]。正确==true）{
警惕（“回答正确！”）；
}否则{
警告（“不正确”）；
}
}

。选项图像{
宽度：100px；
轮廓样式：脊状；
轮廓颜色：红色；
保证金：5px；
光标：指针；
}


哪只是猫？
开始
下一个

尝试使用

input type=“image”

而不是按钮。实际上，您应该能够将

放在

中而不会出现问题。你能添加一个片段让我们知道问题出在哪里吗？当然-一个什么的片段？@code 2021一个你想在它里面插入图像的按钮片段在我的HTML示例中，这四个按钮是我理想的图像位置-你是指图像吗？很抱歉，我对编码不是很有经验，这让人困惑：）好吧，看起来这会添加我的图像，但这也意味着按钮不起作用-可能是因为我把你的JS放在了我所有原始JS的位置，那么，我应该用这个来代替某个部分吗？我修改了它，再次检查它。我没有使“开始”和“下一步”按钮起作用。如果有帮助，请您接受答案。是的！这适用于我的堆栈溢出窗口中的查看代码段，但不适用于我将代码复制到Dreamweaver中，然后在chrome中预览的情况？这有什么原因吗？

<body>
  <!Set up divs of container to hold all, questions to store and present questions and buttons of possible answers>
    <div class="container">
    <div id="question-container" class="hide">
      <div id="question">Question</div>
      <div id="answer-buttons" class="btn-grid">
        <button class="btn"><img src="Images/1Cat.png" width="224" height="174" alt="Cat"></button>
        <button class="btn">Answer 2</button>
        <button class="btn">Answer 3</button>
        <button class="btn">Answer 4</button>
      </div>
    </div>
      <!Set up start and next buttons>
    <div class="controls">
      <button id="start-btn" class="start-btn btn">Start</button>
      <button id="next-btn" class="next-btn btn hide">Next</button>
    </div>
  </div>
</body>

const questions = [
  {
    question: 'Which is a CAT?',
    answers: [
      { text: ' ', correct: true },
      { text: ' ', correct: false },
      { text: ' ', correct: false },
      { text: ' ', correct: false }
    ]
  },
  {
    question: 'Which is a SEAHORSE?',
    answers: [
      { text: ' ', correct: false },
      { text: ' ', correct: true },
      { text: ' ', correct: false },
      { text: 'Fun Fun Function', correct: false }
    ]
  },
  {
    question: 'Which is a LION?',
    answers: [
      { text: ' ', correct: false },
      { text: ' ', correct: false },
      { text: ' ', correct: false },
      { text: ' ', correct: true }
    ]
  },
  {
    question: 'Which is a DEER?',
    answers: [
      { text: ' ', correct: false },
      { text: ' ', correct: false },
      { text: ' ', correct: false },
      { text: ' ', correct: false }
    ]
  }
]