单击蓝色矩形页面发出声音？不工作吗？

Question

当我单击变成红色的蓝色矩形时如何发出咔嗒声。我尝试使用示例中的其他内容并将其放入HTML中，并且可以正常工作，我想将其用于我的蓝色矩形。

首先，我尝试从其他网站中查找示例，然后在下载并放入现有html时找到了一个示例。我尝试穿上html正在工作。但是，当我尝试复制并粘贴代码并更改jquery上的css代码时，声音不起作用。而且我尝试在此html中使用其他代码仍然无法正常工作。

为此我需要帮助。

$(document).ready(function(){

	
  // make radio button active
  $('.question input[type=radio]').change(function() {
    var label = $(this).parent();

    var question = $(this).parent().parent();
    var otherLabels = question.find('label');
    otherLabels.removeClass('active');
    label.toggleClass('active');
    /*
    console.log(otherAnswers);
    otherAnswers.each(function(){
      $(this).prop('checked', false);
    });
    */
  });

	var baseUrl = "http://www.soundjay.com/button/";
var audio = ["beep-01a.mp3"];

$('button.ci').click(function() {
  var i = $(this).attr('id').substring(1);           //get the index of button
  new Audio(baseUrl + audio[i - 1]).play();          //play corresponding audio
});
	
const rollSound = new Audio("./assets/audio/ONEDICE.WAV");
$('#question-label').click(e => rollSound.play());


 // when submit button clicked
 $('#quiz-submit2').on('click', function(){
	 
	 	var baseUrl = "http://www.soundjay.com/button/";
var audio = ["beep-01a.mp3", "beep-02.mp3", "beep-03.mp3", "beep-04.mp3", "beep-05.mp3", "beep-06.mp3", "beep-07.mp3", "beep-08b.mp3", "beep-09.mp3"];

$('#question-label').click(function() {
  var i = $(this).attr('data-qnum').substring(1);           //get the index of button
  new Audio(baseUrl + audio[i - 1]).play();          //play corresponding audio
});

   // create score var
     var score = 0;

   // loop through each question
   $('.question').each(function(){

		 var questionNum = $(this).attr('data-qnum');

     // remove the quiz-msg div
     $('.quiz-msg', this).remove();

     var correct = $(this).find(':checked[data-correct]').length;

		 var alertContent = "";

     // check answer
     if( correct == 1 ){
       // correct!
       //alert("correct!);
       var msgHTML = '<div class="quiz-msg correct">Correct!</div>';
       //$(this).append(msgHTML);


       // Add 1 to the score
       score++;

     }else{
       var msgHTML = '<div class="quiz-msg incorrect">Incorrect!</div>';

       // find the correct radio button and add class
       var correctRadio = $(this).find('input[data-correct]');
       var correctRadioLabel = correctRadio.parent();
       correctRadioLabel.addClass('correct');
     }

		 alertContent += msgHTML;

		 //alert("correct answer!");
		 $.alert({
			 useBootstrap: false,
			 title: 'Question #'+questionNum,
			 content: alertContent,
		 });

   });

   // output score
   $('#score').text(score);

 });

});// JavaScript Document

*:focus {
  outline: none;
}

/* ALL PAGE CSS */
	/* Use for background body and align the content */
body {
  margin: 0;
  background-color: #A27DB5;
  text-align: center;
}

	/* Use for Title of the compant name */
h1 {
  display: block;
  font-size: 5em;
  font-family: "Trebuchet MS", Bold, Sans-serif;
  color: #FFFFFF;
  font-weight: bold;
}

	/* Use for background body and align the content */
h2 {
  display: block;
  font-size: 2.5em;
  font-family: "Trebuchet MS", Bold, Sans-serif;
  color: #DDCD00;
}

/* HOMEPAGE CSS */
	/* For create a space on homepage */
.box {
  width: 100px;
  height: 95px;
}

	/* For create a rectangle color and text color for Intro Video button (Homepage) */
.button {
  background-color: #0DA09C;
  border: none;
  color: black;
  width: 350px;
  height: 40px;
  text-align: center;
  border-radius: 25px;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  font-family: "Trebuchet MS", Sans-serif;
  font-size: 2em;
  cursor: pointer;
  font-weight: bold;
}

	/* For create a rectangle color and text color for Skip button (Homepage) */
.button2 {
  background-color: #A3C6B3;
  border: none;
  color: black;
  width: 350px;
  height: 40px;
  text-align: center;
  border-radius: 25px;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  font-family: "Trebuchet MS", Sans-serif;
  font-size: 1.8em;
  cursor: pointer;
}

/* FOR ALL PAGES (EXCLUDE HOMEPAGE) */
	/* Use for div for homepage button for all pages (Except homepage) */
.mahda {
width: 0px;
height: 0px;
border: 0px;
padding: 0px;
margin: 60px 20px -70px 40px;
}

/* FOR INTROVIDEO PAGE */
	/* For create a rectangle color and text color for Next button (Introvideo Page) */
.button3 {
  background-color: #0DA09C;
  border: none;
  color: black;
  width: 350px;
  height: 40px;
  text-align: center;
  border-radius: 25px;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  font-family: "Trebuchet MS", Sans-serif;
  font-size: 1.8em;
  cursor: pointer;
}

/* FOR MENU SELECTION PAGES */
	/* For create a space on menuselection */
.box2 {
  width: 100px;
  height: 220px;
}

	/* For balancing a logo on button at Menu Selection */
.raisha {
width: 0px;
height: 00px;
border: 0px;
padding: 0px;
margin: 05px 20px -70px 40px;
}

	/* For balancing a Text on button at Menu Selection */
.raisha2 {
width: 300px;
	align-content: center;
height: 00px;
border: 0px;
padding: 2px;
margin: 66px 75px 40px;
}

	/* For create a rectangle color and text color for Game and Quiz button (Menuselection page) */
.button4 {
  background-color: #0DA09C;
  border: none;
  color: white;
  width: 450px;
  height: 50px;
  text-align: center;
  border-radius: 15px;
  text-decoration: none;
  display: inline-block;
  margin: 10px 2px;
  font-family: "Trebuchet MS", Sans-serif;
  font-size: 2em;
  cursor: pointer;
  font-weight: bold;
  padding: 10px 0px 0px 0px;
}

/* FOR CHARACTER SELECTION PAGES */
	/* Use for Title of the Heading Name */
h3 {
z-index: 1000;
position: relative;
	background-color: #A27DB5;
  font-size: 4em;
  font-family: "Trebuchet MS", Bold, Sans-serif;
  text-color: #0000;
  font-weight: bold;
}

	/* For Div Box for character */

.character-selection {
	text-align: center;
}

.character-selection .karin,
.character-selection .karin2 {
	display: inline-block;
	vertical-align: top;
	margin: 20px;
}

.karin {
background-color: #d6970b;
width: 300px;
height: 400px;
	  border-radius: 25px;
color: #000;
padding: 20px;

}

.karin2 {
background-color: #d6970b;
width: 300px;
height: 400px;
	  border-radius: 25px;
color: #000;
padding: 20px;

}

.karin p,
.karin2 p{
	font-size: 1.5em;
}

	/* Use for Text of Character */
h4 {
  display: block;
  font-size: 2.5em;
  font-family: "Trebuchet MS", Bold, Sans-serif;
  color: #000;
	  margin: 0px 30px 60px;
}

p {
  display: block;
  font-size: 2em;
  font-family: "Trebuchet MS", Bold, Sans-serif;
  color: #000;
	  margin: -50px 30px 60px;
}

.myself {
  border: 0px;
	width: 200px;
	height: 200px;
  margin: -40px 0px 60px;
}

.question {
  padding: 1em;

  margin-bottom: 1em;
}

.kontol {
background-color: #d6970b;
width: 300px;
height: 400px;
	  border-radius: 25px;
color: #000;
padding: 20px;
margin: 50px 30px 30px 260px;
}

.Pertanyaan
{
	  display: block;
  font-size: 3.5em;
  font-family: "Trebuchet MS", Sans-serif;
  color: #FFFFFF;
}

.Pertanyaan2
{
	  display: block;
  font-size: 1.5em;
  font-family: "Trebuchet MS", Sans-serif;
  color: #FFFFFF;
}

.quiz-msg {
  padding: 0.5em;
  margin-top: 1em;
}
.quiz-msg.correct {
  background: #e8ffc6;
}
.quiz-msg.incorrect {
  background: #ffe5cc;
}

label.correct {
  background: green;
  padding: 0.2em;
  color: #fff;
}

.karin {
background-color: #d6970b;
width: 300px;
height: 400px;
	  border-radius: 25px;
color: #000;
padding: 20px;

}

.karin2 {
background-color: #d6970b;
width: 300px;
height: 400px;
	  border-radius: 25px;
color: #000;
padding: 20px;

}

.question p,
.question p{
	font-size: 1.5em;
}

.question label {
  display: inline-block;
  margin: 1em;
  background: blue;
  position: relative;
  color: #fff;
	height: 110px;
	width: 160px;
	  font-family: "Trebuchet MS", Bold, Sans-serif;
  padding: 2em;
  font-size: 1.5em;
  border-radius: 8px;
}

.question label {
  display: inline-block;
  vertical-align: top;
  margin: 1em;
  background: blue;
  position: relative;
  color: #fff;
	height: 110px;
	width: 160px;
  margin-top: -45px;
	font-family: "Trebuchet MS", Bold, Sans-serif;
  padding: 2em;
  font-size: 1.5em;
  border-radius: 8px;
}

.question label.active {
  background: red;
}

.question label input {
  position: absolute;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.label {
  height: 110px;
	width: 160px;
  padding: 2em;
}



.ppd{
  background-color: #0DA09C;
  border: none;
  color: white;
  width: 380px;
  height: 50px;
  text-align: center;
  border-radius: 25px;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  font-family: "Trebuchet MS", Sans-serif;
  font-size: 2em;
  cursor: pointer;
  font-weight: bold;
}

.ijo {
  width: 1280px;
  height: 300px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px -12 -280;
  font-family: "Trebuchet MS", Sans-serif;
  font-size: 2em;
  cursor: pointer;
  font-weight: bold;
}

.myself {
    width: 200px;
    height: 200px;
    border: 10px;
    align-items: center;
}



#game-stage {
  width: 900px;
  height: 600px;

  margin: 60px auto 0;
  position: relative;
}



#game-stage #earth {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 25%;
  background: url('../pictures/earth.png');
  background-size: 100% 100%;
}

#emoji {
  position: absolute;
  bottom: 99%;
  left: -0px;
  right: 0;
  width: 110px;
  height: 110px;
  background: url('../pictures/adam.png');
  background-size: 100% 100%;
}



#game-stage #tornado {
  position: absolute;
  bottom: 0;
  right: 15%;
  z-index: 1;
}

#game-stage .slider-container {
  box-sizing: border-box;
  position: absolute;
  right: 5%;
  bottom: 5%;
  background: url('../pictures/linegame.png');
  width: 50px;
  height: 250px;
  z-index: 1;
      margin: 0px -120px -30px -120px;
  padding: 5px 20px;
}

#game-stage .slider-container #slider {
  height: 95%;

}

<!DOCTYPE html>
<html lang="en" >
<!--Head-->
<head>
  <meta charset="UTF-8">
	<!--Title for Page-->
  <title>Quiz</title>
  <!--Link to normalize CSS-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <!--Link to Style CSS-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
  <link rel="stylesheet" href="css/style.css">

</head>
<body>
	<!--Div For Home logo for link icon -->
	  <div class="mahda">
		  <a href="homepage.html">
			  <img src="pictures/home_icon.png" width="65" alt="kopaja" ></a>
	</div>
	<!--Title Company Name-->
    <h1>Tornado Windhole</h1>
	<!--Selection Character Selection-->
    <h3>QUIZ</h3>
	<!--Div for Q1 answer & question-->
	<body>
</body>
<div class="question" data-qnum='1'>
		<!--Question-->
  <p class="Pertanyaan">Q1. How tornado is created</p>
		<!--Rectangle  for A Answer-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="b1" type="button" class="ci">SOUND</button>
	  <label>
    <input name="answers[1]" type="radio" value="A" onmousedown="bleep.play">
    A.<br>Strong rainfall and flooding
  </label>
		<!--Rectangle  for B Answer-->
  <label>
	  <input type="radio" name="answers[1]" value="B" data-correct>
    B.<br>Strong Wind and warm air
  </label>
		<!--Rectangle  for C Answer-->
  <label>
    <input type="radio" name="answers[1]" value="C">
    C.<br>Strong Wind and hot sunny
    </label>
</div>
	<!--Div for Q2 answer & question-->
<div class="question" data-qnum='2'>
  <p class="Pertanyaan">Q2. Which country that mostly tornado occur</p>
			<!--Rectangle  for A Answer-->
  <label>
    <input type="radio" name="answers[2]"  value="A">
    A.<br>United Kingdom
  </label>
		<!--Rectangle  for B Answer-->
  <label>
    <input type="radio" name="answers[2]" value="B">
    B.<br>Canada
  </label>
		<!--Rectangle  for C Answer-->
  <label>
    <input type="radio" name="answers[2]" value="C" data-correct>
    C.<br>United States
    </label>
</div>
	<!--Div for Q3 answer & question-->
<div class="question" data-qnum='3'>
  <p class="Pertanyaan">Q3 How Many KM is Wind Goes</p>
			<!--Rectangle  for A Answer-->
  <label>
    <input type="radio" name="answers[3]"  value="A" data-correct>
    A.<br>100km / Hour
  </label>
		<!--Rectangle  for B Answer-->
  <label>
    <input type="radio" name="answers[3]" value="B">
    B.<br>1000 km / hour
  </label>
		<!--Rectangle  for C Answer-->
  <label>
    <input type="radio" name="answers[3]" value="C">
    C.<br>500 km / hour
    </label>
</div>
<button class="ppd" id="quiz-submit2">Submit</button>
	<!--Link to Jquery-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/1.1.28/howler.min.js"></script>
	    <script  src="js/program.js"></script>
    <script src="js/game.js"></script>
		<!--Link to Carousel-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>

</body>
</html>