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

No:27662

←

Prev Next

→

Harry Potter
Developer User13744｜Date and time 23/12/8 3:06:34
Build time 46.219 sec｜Game capacity 3.468KB｜

Script

Sure! Here's an example of a simple Harry Potter-themed quiz game implemented as a single HTML file with JavaScript. It includes pictograms and is optimized for smartphone operation. Just copy the code below and save it as an HTML file.

Harry Potter Quiz Game

Question icon Who is the main protagonist in the Harry Potter series?

This is a simple quiz game where the player answers multiple-choice questions about Harry Potter. The questions and answers are stored in an array of objects, and the game dynamically updates the interface based on the current question. Once all questions are answered, the player's score is displayed. Note: This is a basic example and can be expanded to include more questions and features as desired.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Harry Potter Quiz Game</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }

h1 {
      margin-bottom: 20px;
      color: #007bff;
    }

p {
      margin-bottom: 10px;
    }

.question {
      font-size: 24px;
      margin-bottom: 20px;
    }

.options button {
      display: block;
      width: 80%;
      max-width: 300px;
      margin: 10px auto;
      padding: 10px;
      font-size: 18px;
      background-color: #007bff;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

.result {
      font-size: 18px;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <h1>Harry Potter Quiz Game</h1>
  <div id="quiz-container">
    <p class="question"><img src="pictograms/question.png" alt="Question icon"> Who is the main protagonist in the Harry Potter series?</p>
    <div class="options">
      <button onclick="checkAnswer('Harry')">Harry</button>
      <button onclick="checkAnswer('Hermione')">Hermione</button>
      <button onclick="checkAnswer('Ron')">Ron</button>
    </div>
  </div>
  <p id="result" class="result"></p>

function displayQuestion() {
      var questionContainer = document.getElementById('quiz-container');
      questionContainer.innerHTML = `
        <p class="question"><img src="pictograms/question.png" alt="Question icon"> ${questions[currentQuestion].question}</p>
        <div class="options">
          <button onclick="checkAnswer('Harry')">Harry</button>
          <button onclick="checkAnswer('Hermione')">Hermione</button>
          <button onclick="checkAnswer('Ron')">Ron</button>
        </div>
      `;
    }

function showResult() {
      var resultElement = document.getElementById('result');
      resultElement.innerHTML = `<img src="pictograms/trophy.png" alt="Trophy icon"> You scored ${score}/${questions.length}!`;
    }

displayQuestion();
  </script>
</body>

</html>
```

Note: This is a basic example and can be expanded to include more questions and features as desired.