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

No:7864

165

←

Prev Next

→

Make a pictogram quiz for adults
Developer User4085｜Date and time 23/7/10 2:13:19
Build time 14.192 sec｜Game capacity 4.66KB｜

Script

Sure! Here's a simple pictogram quiz game that you can play:

Pictogram Quiz

This game presents a series of pictograms and asks the player to guess their meaning by selecting one of the multiple-choice options. After completing the quiz, the player's score is displayed. You can easily add more pictograms and questions by extending the `quizData` array. The images are represented by the respective base64 image data in the code (replace with your own image data), but you can also use external image URLs.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's a simple pictogram quiz game that you can play:

```html
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      
      #quiz-container {
        margin-top: 50px;
      }
      
      .option {
        display: inline-block;
        width: 150px;
        height: 150px;
        border: 1px solid #ccc;
        margin: 10px;
        cursor: pointer;
        text-align: center;
        line-height: 150px;
        font-size: 36px;
        transition: all 0.3s ease;
      }
      
      .option:hover {
        background-color: #f5f5f5;
      }
      
      .correct {
        background-color: #8bc34a;
        color: #fff;
      }
      
      .wrong {
        background-color: #f44336;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="quiz-container">
      <h1>Pictogram Quiz</h1>
      <div id="question-container"></div>
      <div id="options-container"></div>
      <button id="next-btn">Next</button>
      <div id="result"></div>
    </div>
    
    <script>
      const quizData = [
        {
          question: "What does this pictogram represent?",
          img: "🍔",
          options: ["Hamburger", "Pizza", "Sandwich", "Hotdog"],
          correctAnswer: "Hamburger"
        },
        {
          question: "What does this pictogram represent?",
          img: "⚽",
          options: ["Basketball", "Soccer", "Tennis", "Baseball"],
          correctAnswer: "Soccer"
        },
        {
          question: "What does this pictogram represent?",
          img: "⛺",
          options: ["Hotel", "Tent", "Cabin", "Treehouse"],
          correctAnswer: "Tent"
        }
      ];
      
      let currentQuestion = 0;
      let score = 0;
      
      const questionContainer = document.getElementById("question-container");
      const optionsContainer = document.getElementById("options-container");
      const nextBtn = document.getElementById("next-btn");
      const result = document.getElementById("result");
      
      function initializeQuiz() {
        loadQuestion();
        nextBtn.addEventListener("click", loadNextQuestion);
      }
      
      function loadQuestion() {
        const currentQuizData = quizData[currentQuestion];
        
        questionContainer.innerHTML = `<img src="data:image/png;base64,iVBORw0KGgoAAAAN ... YOUR BASE64 IMAGE DATA HERE ... " alt="Pictogram" width="200" height="200" />`;
        
        optionsContainer.innerHTML = "";
        
        currentQuizData.options.forEach((option, index) => {
          const optionDiv = document.createElement("div");
          optionDiv.classList.add("option");
          optionDiv.innerHTML = option;
          optionDiv.setAttribute("data-index", index);
          optionDiv.addEventListener("click", checkAnswer);
          optionsContainer.appendChild(optionDiv);
        });
        
        nextBtn.disabled = true;
        result.innerHTML = "";
      }
      
      function loadNextQuestion() {
        currentQuestion++;
        
        if (currentQuestion < quizData.length) {
          loadQuestion();
        } else {
          finishQuiz();
        }
      }
      
      function checkAnswer(e) {
        const selectedOption = e.target;
        const selectedAnswer = selectedOption.innerText;
        const correctAnswer = quizData[currentQuestion].correctAnswer;
        
        if (selectedAnswer === correctAnswer) {
          selectedOption.classList.add("correct");
          score++;
        } else {
          selectedOption.classList.add("wrong");
        }
        
        Array.from(optionsContainer.children).forEach(option => {
          option.removeEventListener("click", checkAnswer);
        });
        
        nextBtn.disabled = false;
        
        showResult();
      }
      
      function showResult() {
        result.innerHTML = `Score: ${score}/${quizData.length}`;
      }
      
      function finishQuiz() {
        questionContainer.innerHTML = "";
        optionsContainer.innerHTML = "";
        nextBtn.style.display = "none";
        
        showResult();
      }
      
      initializeQuiz();
    </script>
  </body>
</html>
```