Saya membuat kuis dan ingin itu didasarkan pada gambar sebagai pertanyaan atau tanggapan (apa pun yang bisa berhasil) - misalnya, pengguna ditanya 'Hewan apa ini' dan harus memilih tombol 'kucing' setelah melihat gambar Seekor kucing.

Saya telah mencoba memasukkan tag gambar ke dalam tombol HTML saya tetapi tidak muncul di pratinjau saya.

HTML:

<body>
  <!Set up divs of container to hold all, questions to store and present questions and buttons of possible answers>
    <div class="container">
    <div id="question-container" class="hide">
      <div id="question">Question</div>
      <div id="answer-buttons" class="btn-grid">
        <button class="btn"><img src="Images/1Cat.png" width="224" height="174" alt="Cat"></button>
        <button class="btn">Answer 2</button>
        <button class="btn">Answer 3</button>
        <button class="btn">Answer 4</button>
      </div>
    </div>
      <!Set up start and next buttons>
    <div class="controls">
      <button id="start-btn" class="start-btn btn">Start</button>
      <button id="next-btn" class="next-btn btn hide">Next</button>
    </div>
  </div>
</body>

Javascript:

const questions = [
  {
    question: 'Which is a CAT?',
    answers: [
      { text: ' ', correct: true },
      { text: ' ', correct: false },
      { text: ' ', correct: false },
      { text: ' ', correct: false }
    ]
  },
  {
    question: 'Which is a SEAHORSE?',
    answers: [
      { text: ' ', correct: false },
      { text: ' ', correct: true },
      { text: ' ', correct: false },
      { text: 'Fun Fun Function', correct: false }
    ]
  },
  {
    question: 'Which is a LION?',
    answers: [
      { text: ' ', correct: false },
      { text: ' ', correct: false },
      { text: ' ', correct: false },
      { text: ' ', correct: true }
    ]
  },
  {
    question: 'Which is a DEER?',
    answers: [
      { text: ' ', correct: false },
      { text: ' ', correct: false },
      { text: ' ', correct: false },
      { text: ' ', correct: false }
    ]
  }
]

Telah mencoba mencari tahu yang ini untuk sementara waktu, akan sangat menghargai bantuan :)

0
code2021 12 Mei 2021, 06:25

1 menjawab

Jawaban Terbaik

Saya pikir Anda bisa melakukannya dengan cara ini:

const questions = [{
    question: 'Which is a CAT?',
    answers: [{
        text: ' ',
        correct: true
      },
      {
        text: ' ',
        correct: false
      },
      {
        text: ' ',
        correct: false
      },
      {
        text: ' ',
        correct: false
      }
    ]
  },
  {
    question: 'Which is a SEAHORSE?',
    answers: [{
        text: ' ',
        correct: false
      },
      {
        text: ' ',
        correct: true
      },
      {
        text: ' ',
        correct: false
      },
      {
        text: 'Fun Fun Function',
        correct: false
      }
    ]
  }
]

//If you use jQuery:
function checkAns(selectedOption) {
  if (questions[0].answers[+$(selectedOption).data("option")].correct == true) {
    alert("Correct Answer!");
  } else {
    alert("Incorrect");
  }
}
.option-image {
  width: 100px;
  outline-style: ridge;
  outline-color: red;
  margin: 5px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="container">
    <div id="question-container" class="hide">
      <div id="question">Which is cat?</div>
      <div id="answer-buttons" class="btn-grid">
        <img class="option-image" data-option="0" onclick="checkAns(this)" src="https://freepngimg.com/thumb/cat/10-2-cat-png-9.png" />
        <img class="option-image" data-option="1" onclick="checkAns(this)" src="https://pngimg.com/uploads/dog/dog_PNG50348.png" />
        <img class="option-image" data-option="2" onclick="checkAns(this)" src="https://lh3.googleusercontent.com/proxy/GTItesdrRG4uRYC9vihgQTk4J-AYL_ckCu_DeHnn-E--Gqld09lkH9Nwi4O7L28ga5a9DtpUaYVga-3fHnBF9pdvjuGX67v3yAYbWGDfJ81VLyrsSNktW78aNtM" />
        <img class="option-image" data-option="3" onclick="checkAns(this)" src="https://pngimg.com/uploads/donkey/donkey_PNG5.png" />
      </div>
    </div>
    <div class="controls">
      <button id="start-btn" class="start-btn btn">Start</button>
      <button id="next-btn" class="next-btn btn hide">Next</button>
    </div>
  </div>

</body>

<!-- Inserted Images may contain copyright claims. Used for educational Purposes. Fetched from GOOGLE.COM -->

Seperti yang Anda tanyakan, untuk Dreamweaver:

<!DOCTYPE html>
<html>
<style>
.option-image {
  width: 100px;
  outline-style: ridge;
  outline-color: red;
  margin: 5px;
  cursor: pointer;
}
</style>
<body>
  <div class="container">
    <div id="question-container" class="hide">
      <div id="question">Which is cat?</div>
      <div id="answer-buttons" class="btn-grid">
        <img class="option-image" data-option="0" onclick="checkAns(this)" src="https://freepngimg.com/thumb/cat/10-2-cat-png-9.png" />
        <img class="option-image" data-option="1" onclick="checkAns(this)" src="https://pngimg.com/uploads/dog/dog_PNG50348.png" />
        <img class="option-image" data-option="2" onclick="checkAns(this)" src="https://lh3.googleusercontent.com/proxy/GTItesdrRG4uRYC9vihgQTk4J-AYL_ckCu_DeHnn-E--Gqld09lkH9Nwi4O7L28ga5a9DtpUaYVga-3fHnBF9pdvjuGX67v3yAYbWGDfJ81VLyrsSNktW78aNtM" />
        <img class="option-image" data-option="3" onclick="checkAns(this)" src="https://pngimg.com/uploads/donkey/donkey_PNG5.png" />
      </div>
    </div>
    <!Set up start and next buttons>
    <div class="controls">
      <button id="start-btn" class="start-btn btn">Start</button>
      <button id="next-btn" class="next-btn btn hide">Next</button>
    </div>
  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
const questions = [{
    question: 'Which is a CAT?',
    answers: [{
        text: ' ',
        correct: true
      },
      {
        text: ' ',
        correct: false
      },
      {
        text: ' ',
        correct: false
      },
      {
        text: ' ',
        correct: false
      }
    ]
  },
  {
    question: 'Which is a SEAHORSE?',
    answers: [{
        text: ' ',
        correct: false
      },
      {
        text: ' ',
        correct: true
      },
      {
        text: ' ',
        correct: false
      },
      {
        text: 'Fun Fun Function',
        correct: false
      }
    ]
  }
]

//If you use jQuery:
function checkAns(selectedOption) {
  if (questions[0].answers[+$(selectedOption).data("option")].correct == true) {
    alert("Correct Answer!");
  } else {
    alert("Incorrect");
  }
}
</script>
</body>

<!-- Inserted Images may contain copyright claims. Used for educational Purposes. Fetched from GOOGLE.COM -->
</html>
0
Atheesh Thirumalairajan 12 Mei 2021, 03:56