Click here for free DL of the app version that can save data.

No:9547

134

←

Prev Next

→

5 question no lanscape game
Developer User4381｜Date and time 23/7/26 1:15:43
Build time 37.796 sec｜Game capacity 5.628KB｜

Script

Sure, here's an example of a simple 5 question game implemented as a single HTML file using JavaScript and pictograms:

5 Question Game

Question 1: What's your favorite fruit?

Apple

Banana

Orange

In this game, there is only one question provided as an example, but you can easily add more questions by extending the `questions` array. The `currentQuestion` variable keeps track of the current question being displayed, and the `gameOver` variable is used to determine when the game has finished. The `checkAnswer` function is called when an option is clicked, and it checks if the answer selected is correct or not. The result is displayed, and if all questions have been answered, the "Play Again" button appears. Clicking the "Play Again" button resets the game back to the first question.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

Click here for free DL of the app version that can save data.

Sure, here's an example of a simple 5 question game implemented as a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>5 Question Game</title>
    <style>
        body {
            text-align: center;
            font-family: Arial, sans-serif;
        }

#questionText {
            font-size: 20px;
            margin: 20px;
        }

#optionsContainer {
            display: flex;
            justify-content: center;
        }

.optionBtn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin: 10px;
            padding: 10px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: #f0f0f0;
            cursor: pointer;
        }

.optionBtn img {
            max-width: 60px;
            max-height: 60px;
        }

#resultText {
            font-size: 18px;
            margin: 20px;
        }

#playAgainBtn {
            margin-top: 20px;
            padding: 10px 20px;
            border-radius: 5px;
            background-color: #0099ff;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>5 Question Game</h1>

<div id="questionText">Question 1: What's your favorite fruit?</div>
    <div id="optionsContainer">
        <div class="optionBtn" onclick="checkAnswer('apple')">
            <img src="https://example.com/apple.png" alt="Apple">
            <span>Apple</span>
        </div>
        <div class="optionBtn" onclick="checkAnswer('banana')">
            <img src="https://example.com/banana.png" alt="Banana">
            <span>Banana</span>
        </div>
        <div class="optionBtn" onclick="checkAnswer('orange')">
            <img src="https://example.com/orange.png" alt="Orange">
            <span>Orange</span>
        </div>
    </div>

<button id="playAgainBtn" onclick="resetGame()">Play Again</button>

let currentQuestion = 0;
        let gameOver = false;

function checkAnswer(answer) {
            if (!gameOver) {
                const resultText = document.getElementById("resultText");

if (answer === questions[currentQuestion].correctAnswer) {
                    resultText.textContent = "Correct answer!";
                } else {
                    resultText.textContent = "Wrong answer!";
                }

currentQuestion++;

if (currentQuestion >= questions.length) {
                    gameOver = true;
                    document.getElementById("playAgainBtn").style.display = "block";
                } else {
                    displayQuestion(currentQuestion);
                }
            }
        }

function displayQuestion(questionIndex) {
            const questionText = document.getElementById("questionText");
            questionText.textContent = questions[questionIndex].question;

const optionsContainer = document.getElementById("optionsContainer");
            optionsContainer.innerHTML = "";

for (let option of questions[questionIndex].options) {
                const optionBtn = document.createElement("div");
                optionBtn.classList.add("optionBtn");
                optionBtn.setAttribute("onclick", `checkAnswer('${option.name}')`);
                
                const optionImg = document.createElement("img");
                optionImg.src = option.image;
                optionImg.alt = option.name;
                optionBtn.appendChild(optionImg);

const optionName = document.createElement("span");
                optionName.textContent = option.name;
                optionBtn.appendChild(optionName);

optionsContainer.appendChild(optionBtn);
            }
        }

function resetGame() {
            currentQuestion = 0;
            gameOver = false;
            document.getElementById("playAgainBtn").style.display = "none";
            document.getElementById("resultText").textContent = "";
            displayQuestion(currentQuestion);
        }

displayQuestion(currentQuestion);
    </script>
</body>
</html>
```