https://b2a.kz/tools/

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Random Student Selector</title>
7  <style>
8    /* Basic Layout */
9    body {
10      font-family: Arial, sans-serif;
11      display: flex;
12      justify-content: center;
13      align-items: center;
14      height: 100vh;
15      margin: 0;
16      background-color: #e0f7fa;
17    }
18
19    .container {
20      display: flex;
21      width: 95%;
22      border: 2px solid #0077c2;
23      border-radius: 8px;
24      overflow: hidden;
25      background-color: #fff;
26	  height: 80vh; /* Увеличиваем высоту на 100% от экрана */
27    }
28
29    .controls {
30      width: 30%;
31      padding: 20px;
32      background-color: #e0f7fa;
33      display: flex;
34      flex-direction: column;
35      align-items: center;
36    }
37
38    /* Styled input textarea */
39    .controls textarea {
40      width: 100%;
41      height: 45vh;
42      padding: 10px;
43      margin-bottom: 10px;
44      border: 2px solid #0D92F4;
45      border-radius: 5px;
46      resize: none;
47      font-size: 16px;
48    }
49
50    .controls button {
51      width: 100%;
52      padding: 10px;
53      margin-bottom: 10px;
54      background-color: #0077c2;
55      color: #fff;
56      border: none;
57      cursor: pointer;
58      font-size: 16px;
59    }
60
61    /* History section */
62    .history {
63      width: 100%;
64      height: 30vh;
65      overflow-y: auto;
66      border: 2px solid #0D92F4;
67      border-radius: 5px;
68      padding: 10px;
69      font-size: 14px;
70      margin-top: 10px;
71      background-color: #ffffff;
72      color: #333;
73    }
74
75    .history div {
76      margin-bottom: 5px;
77    }
78
79    .wheel-container {
80      width: 90%;
81      display: flex;
82      justify-content: center;
83      align-items: center;
84      position: relative;
85      background-color: #f0f4f8;
86      cursor: pointer;
87	  /* Ticker view */
88	  --size: clamp(250px, 80vmin, 700px);
89	  --lg-hs: 0 3%;
90	  --lg-stop: 50%;
91	  --lg: linear-gradient(
92		  hsl(var(--lg-hs) 0%) 0 var(--lg-stop),
93		  hsl(var(--lg-hs) 20%) var(--lg-stop) 100%
94		);
95 
96    }
97
98    /* Ticker styling */
99	.ticker {
100		/* добавляем относительное позиционирование */
101		position: relative;
102		/* устанавливаем размеры */
103		left: calc(var(--size) / 10);
104		width: calc(var(--size) / 10);
105		height: calc(var(--size) / 20);
106		/* фон язычка */
107		background: var(--lg);
108		/* делаем так, чтобы язычок был выше колеса */
109		z-index: 1;
110		/* форма язычка */
111		clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
112		/* устанавливаем точку, относительно которой будет вращаться язычок при движении колеса */
113		transform-origin: center left;
114		/* инвертируем стрелку по горизонтали */
115		transform: scaleX(-1);
116
117	}
118
119    /* Wheel Styling */
120    canvas {
121      border-radius: 50%;
122      background-color: #ffffff;
123    }
124
125    /* Modal Styling */
126    .modal {
127      display: none;
128      position: fixed;
129      top: 50%;
130      left: 50%;
131      transform: translate(-50%, -50%);
132      background-color: #fff;
133      padding: 20px;
134      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
135      z-index: 1000;
136      text-align: center;
137    }
138
139    .modal button {
140      margin: 10px;
141      padding: 10px;
142      background-color: #0077c2;
143      color: #fff;
144      border: none;
145      cursor: pointer;
146    }
147  </style>
148	
149	

149<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4905011197671130"
150     crossorigin="anonymous"></script>

150
151</head>
152	
153	<!-- Google tag (gtag.js) -->

153
154<script async src="https://www.googletagmanager.com/gtag/js?id=

154G-S1NW9CKCLF

154"></script>

155<script>
156  

156window.dataLayer = window.dataLayer || [];
157  function gtag(){dataLayer.push(arguments);}
158  gtag('js', new Date());
159
160  gtag('config', '

160G-S1NW9CKCLF

160');

161</script>

161
162	
163<body>
164<div class="container">
165  <div class="controls">
166    <textarea id="studentList" placeholder="Enter student names, separated by commas or new lines"></textarea>
167    <button id="loadListButton">Load Student List</button>
168    <button id="selectButton">Select Student</button>
169    <div class="history" id="history">Selection History:</div>
170  </div>
171  
172  <div class="wheel-container">
173    <canvas id="wheel" width="700px" height="700px"></canvas>
174    <div class="ticker">?</div>
175  </div>
176</div>
177
178<div class="modal" id="modal">
179  <p id="selectedStudent"></p>
180  <button id="closeButton">Close</button>
181  <button id="removeButton">Remove from List</button>
182</div>
183

184<script>
185  const studentListTextarea = document.getElementById("studentList");
186  const loadListButton = document.getElementById("loadListButton");
187  const selectButton = document.getElementById("selectButton");
188  const wheelCanvas = document.getElementById("wheel");
189  const modal = document.getElementById("modal");
190  const selectedStudentDisplay = document.getElementById("selectedStudent");
191  const closeButton = document.getElementById("closeButton");
192  const removeButton = document.getElementById("removeButton");
193  const historyDiv = document.getElementById("history");
194
195  // Rainbow colors plus purple
196	const colors = ['#FF0000', '#0095ff', '#00FF00', '#FFFF00', '#00FFFF'];
197
198  let studentList = [];
199  let selectedStudent = "";
200  let spinAngle = 0; // Keeps track of the current rotation angle for each spin
201
202  function parseStudentList() {
203    const inputText = studentListTextarea.value;
204    studentList = inputText.split(/[\n,]+/).map(name => name.trim()).filter(name => name);
205    drawWheel();
206  }
207
208	function drawWheel() {
209	  const ctx = wheelCanvas.getContext("2d");
210	  const numStudents = studentList.length;
211	  const arcSize = (2 * Math.PI) / numStudents;
212	  const centerX = wheelCanvas.width / 2; // Центр по горизонтали
213	  const centerY = wheelCanvas.height / 2; // Центр по вертикали
214	  const radius = wheelCanvas.width / 2; // Радиус будет половиной от ширины канваса
215
216	  ctx.clearRect(0, 0, wheelCanvas.width, wheelCanvas.height); // Очищаем канвас
217	  for (let i = 0; i < numStudents; i++) {
218		ctx.beginPath();
219		ctx.fillStyle = colors[i % colors.length];
220		ctx.moveTo(centerX, centerY); // Центр колеса
221		ctx.arc(centerX, centerY, radius, i * arcSize, (i + 1) * arcSize); // Новый радиус
222		ctx.fill();
223
224		// Рисуем имена студентов
225		ctx.save();
226		ctx.translate(centerX, centerY);
227		ctx.rotate(i * arcSize + arcSize / 2);
228		ctx.textAlign = "right";
229		ctx.fillStyle = "#000";
230		ctx.font = `${radius / 8}px Arial`; // Уменьшаем шрифт пропорционально размеру колеса
231		ctx.fillText(studentList[i], radius - 20, 10);
232		ctx.restore();
233	  }
234	}
235
236  function spinWheel() {
237    const spinTime = 5000; // 5 seconds
238    const initialSpeed = 360 * 6; // Start with a faster spin for full rotations
239    const angleIncrement = initialSpeed + (Math.random() * 360); // Final stop within a single revolution
240
241    spinAngle += angleIncrement; // Ensure spins are cumulative
242    wheelCanvas.style.transition = `transform ${spinTime / 1000}s cubic-bezier(0.33, 1, 0.68, 1)`;
243    wheelCanvas.style.transform = `rotate(${spinAngle}deg)`;
244
245    setTimeout(() => {
246      // Calculate the selected student based on the pointer’s position on the right side
247      const degreesPerStudent = 360 / studentList.length;
248      const selectedIndex = Math.floor((360 - (spinAngle % 360)) / degreesPerStudent) % studentList.length;
249      selectedStudent = studentList[selectedIndex];
250      showModal(selectedStudent.toUpperCase());
251      updateHistory(selectedStudent);
252    }, spinTime);
253  }
254
255  function showModal(student) {
256    selectedStudentDisplay.textContent = `SELECTED: ${student}`;
257    modal.style.display = "block";
258  }
259
260  function closeModal() {
261    modal.style.display = "none";
262  }
263
264  function removeStudent() {
265    studentList = studentList.filter(name => name !== selectedStudent);
266    closeModal();
267    drawWheel();
268  }
269
270  function updateHistory(student) {
271    const entry = document.createElement("div");
272    const index = historyDiv.childElementCount + 1;
273    entry.textContent = `${index}. ${student}`;
274    historyDiv.appendChild(entry);
275    historyDiv.scrollTop = historyDiv.scrollHeight; // Scroll to the latest entry
276  }
277
278  loadListButton.addEventListener("click", parseStudentList);
279  selectButton.addEventListener("click", spinWheel);
280  closeButton.addEventListener("click", closeModal);
281  removeButton.addEventListener("click", () => {
282    removeStudent();
283  });
284
285  // Allow clicking on the wheel to spin
286  wheelCanvas.addEventListener("click", spinWheel);
287
288  // Hide modal when clicked outside
289  window.addEventListener("click", (e) => {
290    if (e.target === modal) closeModal();
291  });
292</script>

292
293</body>
294</html>