在 html 、 js 、 php 中的随机问题中添加图像答案

【问题标题】：Adding images inside a randomized question in html , js , php在 html 、 js 、 php 中的随机问题中添加图像
【发布时间】：2019-03-03 13:49:13
【问题描述】：

我正在尝试做一个类似于下面这个的随机测验：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Random Questions</title>
</head>
<body>
    <p id="message001">This country's capital is <text id="name001"></text>.</p>
    <div id="disappear001">
    <input type="text" id="input001" /><button onclick="submit001()">Submit</button>
        </div>
    <p id="answer001"></p>
    <p id="button001"></p>

    <script>
        var capitals001 = ["Jerusalem", "London", "Washington DC", "Addis Ababa"];
        var countries001 = ["Palestine", "UK", "USA", "Ethiopia"];
        var random001 = Math.floor(Math.random() * capitals001.length);

        function submit001() {
            var b = input001.value;
            if (random001 == 0 && b == countries001[0]) {
                document.getElementById("answer001").innerHTML = "Correct..";
                document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
                document.getElementById("disappear001").innerHTML = "";

            } else if (random001 == 1 && b == countries001[1]) {
                document.getElementById("answer001").innerHTML = "Correct..";
                document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
                document.getElementById("disappear001").innerHTML = "";

            } else if (random001 == 2 && b == countries001[2]) {
                document.getElementById("answer001").innerHTML = "Correct..";
                document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
                document.getElementById("disappear001").innerHTML = "";

            } else if (random001 == 3 && b == countries001[3]) {
                document.getElementById("answer001").innerHTML = "Correct..";
                document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
document.getElementById("disappear001").innerHTML = "";
            }

            else {
                document.getElementById("answer001").innerHTML = "Incorrect..";
                document.getElementById("button001").innerHTML = "<button onclick=btn001()>Next</button>";
                document.getElementById("disappear001").innerHTML = "";
            }
        }

        document.getElementById("name001").innerHTML = capitals001[random001];

        function btn001() {
            random001 = Math.floor(Math.random() * capitals001.length);
            document.getElementById("name001").innerHTML = capitals001[random001];
            document.getElementById("button001").innerHTML = "";
            document.getElementById("disappear001").innerHTML = "<input type=text id=input001 /><button onclick=submit001()>Submit</button>";
            document.getElementById("answer001").innerHTML = "";
        }
    </script>
</body>
</html>

我想更改问题部分：

var capitals001 = ["Jerusalem", "London", "Washington DC", "Addis Ababa"];

到一个图像数组中。我不想用这些随机化问题，而是想制作一个随机问题来选择一张随机图片。我怎么做？任何帮助将不胜感激谢谢 x)

【问题讨论】：

只需使用 encodeURIComponent 和 decodeURIComponent 将图像标签放入数组中

标签： javascript php html arrays variables

【解决方案1】：

使用 encodeURIComponent 和 decodeURIComponent 发送混合内容。

 var questions = [];
 questions.push(encodeURIComponent("what is the capital of spain? <img src='/path_to_image.png' />"));

那么当你显示它时：

 document.getElementById("question").innerrHTML = decodeURIComponent(questions[0]);

【讨论】：

【解决方案2】：

您可以使用图像的 url 数组，然后创建一个“img”元素并将其 src 绑定到您的数组：

    var capitals001 = ["Jerusalem", "London", "Washington DC", "Addis Ababa"];
    var capitalsImg001 = ["path/to/image.jpg", "path/to/image2.jpg", "path/to/image3.jpg", "path/to/image4.jpg"];
    var countries001 = ["Palestine", "UK", "USA", "Ethiopia"];
    var random001 = Math.floor(Math.random() * capitals001.length);

...

 function btn001() {
            random001 = Math.floor(Math.random() * capitals001.length);
            document.getElementById("name001").innerHTML = "<img src="+capitalsImg001[random001]+" />";
            document.getElementById("button001").innerHTML = "";
            document.getElementById("disappear001").innerHTML = "<input type=text id=input001 /><button onclick=submit001()>Submit</button>";
            document.getElementById("answer001").innerHTML = "";
        }

【讨论】：

所以我尝试了这个，但它似乎没有工作..它没有显示任何东西......我是否也应该在身体里放一些东西，比如
这个国家的首都是
，如果是，我应该在src和id中输入什么？