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

No:24051

Quizz games realated hair products
Developer User11279｜Date and time 23/11/5 15:51:12
Build time 71.29 sec｜Game capacity 3.74KB｜

Script

Sure! Here's an example of a quiz game related to hair products implemented as a single HTML file using JavaScript:

Hair Product Quiz

In this quiz game, there are four hair product-related questions, each with multiple choice options. The user selects an option by tapping on it, and their score is calculated based on the correct answers. The final score is displayed at the end of the quiz. Note: The pictograms are not added in this example, but you can modify the code and add appropriate pictograms/images for each question or option if desired.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure! Here's an example of a quiz game related to hair products implemented as a single HTML file using JavaScript:

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

h1 {
      margin-top: 50px;
    }

.question {
      font-size: 24px;
      margin-top: 30px;
    }

.options {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }

.option {
      margin: 0 10px;
      cursor: pointer;
      font-size: 18px;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
    }

.option:hover {
      background-color: #f2f2f2;
    }

.result {
      margin-top: 30px;
    }
  </style>
</head>
<body>
  <h1>Hair Product Quiz</h1>
  <div class="question"></div>
  <div class="options">
    <button class="option"></button>
    <button class="option"></button>
    <button class="option"></button>
    <button class="option"></button>
  </div>
  <div class="result"></div>

var currentQuestion = 0;
    var score = 0;

var questionElement = document.querySelector('.question');
    var optionsElement = document.querySelector('.options');
    var resultElement = document.querySelector('.result');

function showQuestion() {
      var question = questions[currentQuestion];
      questionElement.innerText = question.question;

optionsElement.innerHTML = '';
      for (var i = 0; i < question.options.length; i++) {
        var optionButton = document.createElement('button');
        optionButton.className = 'option';
        optionButton.innerText = question.options[i];
        optionsElement.appendChild(optionButton);
        optionButton.addEventListener('click', handleAnswerClick);
      }
    }

function handleAnswerClick(event) {
      var selectedOption = event.target;
      var question = questions[currentQuestion];

if (question.answer === Array.prototype.indexOf.call(optionsElement.children, selectedOption)) {
        score++;
      }

currentQuestion++;

if (currentQuestion < questions.length) {
        showQuestion();
      } else {
        showResult();
      }
    }

function showResult() {
      questionElement.style.display = 'none';
      optionsElement.style.display = 'none';
      resultElement.innerText = "Your score: " + score + " out of " + questions.length;
    }

showQuestion();
  </script>
</body>
</html>
```

Note: The pictograms are not added in this example, but you can modify the code and add appropriate pictograms/images for each question or option if desired.