28명의 학생 랜덤으로 자리배치
<!DOCTYPE html>
<html>
<head>
<style>
#projector {
background-color: rgb(207, 232, 220);
border: 2px solid rgb(79, 185, 227);
padding: 10px;
border-radius: 5px;
width: 30%;
text-align: center;
margin: 30px auto;
}
div>div {
text-align: center;
background-color: rgb(207, 232, 220);
border: 2px solid rgb(79, 185, 227);
padding: 10px;
border-radius: 5px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 25% 25% 25% 25%;
}
</style>
</head>
<body>
<div id="projector">프로젝터</div>
<div class="wrapper">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
let persons = null;
document.querySelector('#projector').addEventListener('click', () => {
if (confirm('재배치?')) {
persons = [
'1', '2', '3', '4', '5', '6', '7',
'8', '9', '10','11','12','13', '14',
'15', '16', '17','18','19','20', '21',
'22', '23', '24','25','26','27', '28'
];
persons.sort(() => Math.random() - 0.5);
for (let i = 1; i <= persons.length; i++) {
document.querySelector(
`.wrapper > div:nth-child(${i})`).innerHTML = persons[i - 1];
}
}
});
</script>
</body>
</html>
