Добавление изображений в случайный вопрос в HTML, JS, PHP - PullRequest
Новая
       1

Добавление изображений в случайный вопрос в HTML, JS, PHP

0 голосов
/ 27 сентября 2018

Я пытаюсь сделать рандомизированную викторину, подобную приведенной ниже: 

<!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"];

на массив изображений.Вместо того, чтобы рандомизировать вопросы с этими, я хочу сделать случайный вопрос, который выбирает случайную картину.Как я могу это сделать?Любая помощь будет принята с благодарностью х)

Ответы [ 2 ]

0 голосов
/ 27 сентября 2018

Используйте 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]);
0 голосов
/ 27 сентября 2018

Вы можете использовать массив 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 = "";
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...