CLICKER-ELEVE

/html

<!DOCTYPE html>
<html lang= »fr »>
<head>
<meta charset= »UTF-8″>
<meta name= »viewport » content= »width=device-width, initial-scale=1.0″>
<title>Élève – Client</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
.container { max-width: 400px; margin: auto; }
.button { padding: 10px; margin: 5px; cursor: pointer; }
.response { background-color: red; color: white; }
.selected { background-color: green; }
.violet { background-color: purple; color: white; }
table { width: 100%; margin-top: 20px; border-collapse: collapse; }
th, td { border: 1px solid black; padding: 5px; }
.response-container { display: flex; justify-content: center; gap: 10px; }
</style>
</head>
<body>
<div class= »container » id= »profileScreen »>
<h2>Initialisation du Profil</h2>
<label>Nom et Prénom:</label>
<input type= »text » id= »name »><br>
<label>Identifiant (1-49):</label>
<input type= »number » id= »id » min= »1″ max= »49″><br>
<button class= »button violet » onclick= »saveProfile() »>SAVE</button>
</div>

<div class= »container » id= »voteScreen » style= »display: none; »>
<button class= »button violet » onclick= »endTest() »>END OF TEST</button>
<h2>Choisissez une réponse</h2>
<div class= »response-container »>
<button class= »button response » id= »r1″ onclick= »selectResponse(1) »>RESPONSE 1</button>
<button class= »button response » id= »r2″ onclick= »selectResponse(2) »>RESPONSE 2</button>
<button class= »button response » id= »r3″ onclick= »selectResponse(3) »>RESPONSE 3</button>
<button class= »button response » id= »r4″ onclick= »selectResponse(4) »>RESPONSE 4</button>
</div>
<br>
<button class= »button violet » id= »sendBtn » onclick= »sendResponse() » disabled>SEND RESPONSE</button>

<h3>Réponses envoyées (10 dernières)</h3>
<table>
<thead>
<tr>
<th>TIME</th>
<th>ID</th>
<th>NAME</th>
<th>RESPONSE</th>
</tr>
</thead>
<tbody id= »responseTable »></tbody>
</table>
</div>

function selectResponse(responseNumber) {
selectedResponse = responseNumber;
document.querySelectorAll(« .response »).forEach(btn => {
btn.classList.remove(« selected »);
});
document.getElementById(« r » + responseNumber).classList.add(« selected »);
document.getElementById(« sendBtn »).disabled = false;
}

function sendResponse() {
if (selectedResponse) {
// Ajouter la nouvelle réponse au tableau
const newResponse = {
time: new Date().toLocaleTimeString(),
id: userId,
name: userName,
response: « RESPONSE » + selectedResponse
};
responses.push(newResponse);

// Garder seulement les 10 dernières réponses
if (responses.length > 10) {
responses.shift(); // Supprimer la première réponse (la plus ancienne)
}

// Mettre à jour l’affichage du tableau
updateTable();

document.getElementById(« sendBtn »).disabled = true;
document.querySelectorAll(« .response »).forEach(btn => {
btn.classList.remove(« selected »);
});
selectedResponse = null;
}
}

function updateTable() {
const table = document.getElementById(« responseTable »);
// Vider le tableau
table.innerHTML = « »;

// Ajouter les réponses du tableau (les 10 dernières)
responses.forEach(response => {
const row = table.insertRow();
const timeCell = row.insertCell(0);
const idCell = row.insertCell(1);
const nameCell = row.insertCell(2);
const responseCell = row.insertCell(3);

timeCell.textContent = response.time;
idCell.textContent = response.id;
nameCell.textContent = response.name;
responseCell.textContent = response.response;
});
}

function endTest() {
alert(« Test terminé »);
location.reload();
}
</script>
</body>
</html>

Titre