How can I place a large circle in the center of the screen and four smaller circles on the right side? The small circles should have bouncing balls inside, each with only one ball instead of multiple. An alert should be triggered by the main big circle but not from the small circles. Can anyone provide guidance on how to solve this issue? Any help would be greatly appreciated. Thank you in advance.
// JavaScript code for creating circles and balls
// Define necessary functions and prototypes...
/* CSS code for styling the circles */
canvas {
background: #eee;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 0 0 4px #000;
}
.row {
display: flex;
}
.container1 {
display: flex;
flex-direction: column;
margin-left: 70%;
margin-top: 8%;
float: right;
}
#Canvas1, #Canvas2, #Canvas3, #Canvas4 {
background: #eee;
border-radius: 50%;
border: solid 1px #000;
margin: 4px;
}<div class="column">
<canvas id="Canvas"></canvas>
</div>
<div class="container1">
<div class="row">
<canvas id="Canvas1"></canvas>
<div><p>abc</p></div>
<canvas id="Canvas2"></canvas>
<div><p>def</p></div>
</div>
<div class="row">
<canvas id="Canvas3"></canvas>
<div><p>hij</p></div>
<canvas id="Canvas4"></canvas>
<div><p>klm</p></div>
</div>
</div>
<div id="mydiv"></div>
<div id="y"></div>
<div id="dx"></div>
<div id="dy"></div>
<div id="dialog" class="hidden">
<div class="message"></div>
<div>
<button class="ok">OK</button>
</div>
</div>