Spin the Wheel<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \r\n }\r\n .container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n max-width: 1200px;\r\n width: 100%;\r\n background-color: #ffffff;\r\n border-radius: 16px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n padding: 30px;\r\n }\r\n @media (min-width: 768px) {\r\n .container {\r\n flex-direction: row;\r\n }\r\n }\r\n .wheel-section, .entries-section {\r\n flex: 1;\r\n padding: 20px;\r\n border-radius: 12px;\r\n background-color: #f9fafb;\r\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);\r\n }\r\n .wheel-section {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n }\r\n canvas {\r\n display: block;\r\n border-radius: 50%;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n background-color: #ffffff;\r\n max-width: 100%; \/* Ensure canvas scales down on smaller screens *\/\r\n height: auto; \/* Maintain aspect ratio *\/\r\n }\r\n .spinner-center {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 80px;\r\n height: 80px;\r\n background-color: #ffffff;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n color: #333;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n text-align: center;\r\n user-select: none;\r\n font-size: 0.9rem;\r\n line-height: 1.2;\r\n padding: 5px;\r\n }\r\n .arrow {\r\n position: absolute;\r\n right: -15px; \/* Adjust as needed *\/\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 0;\r\n height: 0;\r\n border-top: 15px solid transparent;\r\n border-bottom: 15px solid transparent;\r\n border-left: 20px solid #ff4d4d; \/* Red arrow *\/\r\n z-index: 10;\r\n }\r\n .entry-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 8px 12px;\r\n background-color: #ffffff;\r\n border-radius: 8px;\r\n margin-bottom: 8px;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\r\n }\r\n .entry-item:last-child {\r\n margin-bottom: 0;\r\n }\r\n .entry-item button {\r\n background-color: #ef4444; \/* Red-500 *\/\r\n color: white;\r\n padding: 4px 8px;\r\n border-radius: 6px;\r\n font-size: 0.8rem;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n }\r\n .entry-item button:hover {\r\n background-color: #dc2626; \/* Red-600 *\/\r\n }\r\n .result-box {\r\n background-color: #e0f2fe; \/* Light blue *\/\r\n border: 2px solid #38b2ac; \/* Teal-500 *\/\r\n color: #1a202c; \/* Dark grey *\/\r\n padding: 15px;\r\n border-radius: 10px;\r\n text-align: center;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n margin-top: 20px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\r\n }\r\n .btn-primary {\r\n background-color: #38b2ac; \/* Teal-500 *\/\r\n color: white;\r\n padding: 10px 20px;\r\n border-radius: 8px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n }\r\n .btn-primary:hover {\r\n background-color: #319795; \/* Teal-600 *\/\r\n }\r\n .add-entry-section {\r\n display: flex;\r\n gap: 10px;\r\n margin-top: 15px;\r\n }\r\n .add-entry-section input {\r\n flex-grow: 1;\r\n padding: 10px;\r\n border: 1px solid #cbd5e0; \/* Gray-300 *\/\r\n border-radius: 8px;\r\n font-size: 1rem;\r\n }\r\n .add-entry-section input:focus {\r\n outline: none;\r\n border-color: #38b2ac; \/* Teal-500 *\/\r\n box-shadow: 0 0 0 2px rgba(56, 178, 172, 0.2);\r\n }\r\n .spin-count-box {\r\n background-color: #fffbe0; \/* Light yellow *\/\r\n border: 2px solid #f6e05e; \/* Yellow-400 *\/\r\n color: #4a5568; \/* Gray-700 *\/\r\n padding: 10px;\r\n border-radius: 8px;\r\n text-align: center;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-top: 15px;\r\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-100 flex items-center justify-center min-h-screen p-4\">\r\n <div class=\"container flex flex-col md:flex-row gap-8\">\r\n \r\n <div class=\"wheel-section flex-1 flex flex-col items-center justify-center p-6 relative\">\r\n <h2 class=\"text-2xl font-bold mb-6 text-gray-800\">Spin the Wheel!<\/h2>\r\n <div class=\"relative w-full max-w-lg aspect-square flex items-center justify-center\">\r\n <canvas id=\"wheelCanvas\" width=\"500\" height=\"500\" class=\"rounded-full\"><\/canvas>\r\n <div id=\"spinnerCenter\" class=\"spinner-center\">\r\n Spin\r\n <\/div>\r\n <div class=\"arrow\"><\/div>\r\n <\/div>\r\n <div id=\"resultBox\" class=\"result-box mt-8 w-full max-w-md hidden\">\r\n Winner: <span id=\"winnerName\"><\/span>\r\n <\/div>\r\n <div id=\"spinCountBox\" class=\"spin-count-box mt-4 w-full max-w-md\">\r\n Wheel used: <span id=\"spinCount\">0<\/span> times\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"entries-section flex-1 p-6\">\r\n <h2 class=\"text-2xl font-bold mb-6 text-gray-800\">Entries<\/h2>\r\n <div class=\"add-entry-section\">\r\n <input type=\"text\" id=\"newEntryInput\" placeholder=\"Add a new entry\" class=\"flex-grow p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500\">\r\n <button id=\"addEntryBtn\" class=\"btn-primary px-4 py-2\">Add Entry<\/button>\r\n <\/div>\r\n <div id=\"entriesList\" class=\"mt-6 space-y-3 max-h-96 overflow-y-auto\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const canvas = document.getElementById('wheelCanvas');\r\n const ctx = canvas.getContext('2d');\r\n const spinnerCenter = document.getElementById('spinnerCenter');\r\n const newEntryInput = document.getElementById('newEntryInput');\r\n const addEntryBtn = document.getElementById('addEntryBtn');\r\n const entriesList = document.getElementById('entriesList');\r\n const resultBox = document.getElementById('resultBox');\r\n const winnerNameSpan = document.getElementById('winnerName');\r\n const spinCountBox = document.getElementById('spinCount'); \/\/ Element to display spin count\r\n\r\n \/\/ Initial entries\r\n let entries = [\"Ali\", \"Beatriz\", \"Charles\", \"Diya\", \"Eric\", \"Fatima\", \"Gabriel\", \"Hanna\"];\r\n const colors = [\r\n '#FFD700', '#FF6347', '#6A5ACD', '#3CB371', '#FF8C00', '#4682B4', '#DA70D6', '#20B2AA'\r\n ]; \/\/ Gold, Tomato, SlateBlue, MediumSeaGreen, DarkOrange, SteelBlue, Orchid, LightSeaGreen\r\n\r\n let currentRotation = 0; \/\/ Current rotation angle of the wheel\r\n let spinning = false; \/\/ Flag to prevent multiple spins\r\n let spinCounter = 0; \/\/ Counter for wheel usage\r\n\r\n \/\/ Function to draw the wheel\r\n function drawWheel() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height); \/\/ Clear the canvas\r\n const centerX = canvas.width \/ 2;\r\n const centerY = canvas.height \/ 2;\r\n const radius = Math.min(centerX, centerY) * 0.9; \/\/ Slightly smaller radius for padding\r\n\r\n const arcSize = (2 * Math.PI) \/ entries.length;\r\n\r\n for (let i = 0; i < entries.length; i++) {\r\n const startAngle = currentRotation + i * arcSize;\r\n const endAngle = startAngle + arcSize;\r\n\r\n \/\/ Draw segment\r\n ctx.beginPath();\r\n ctx.arc(centerX, centerY, radius, startAngle, endAngle);\r\n ctx.lineTo(centerX, centerY);\r\n ctx.closePath();\r\n ctx.fillStyle = colors[i % colors.length]; \/\/ Cycle through colors\r\n ctx.fill();\r\n ctx.strokeStyle = '#ffffff'; \/\/ White border for segments\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n\r\n \/\/ Draw text (upright, parallel to the top of the wheel)\r\n ctx.save();\r\n ctx.translate(centerX, centerY);\r\n \/\/ Rotate text to be upright relative to the canvas, and position it within the segment\r\n \/\/ The angle `startAngle + arcSize \/ 2` gives the center of the segment.\r\n \/\/ Adding `Math.PI \/ 2` rotates it so the text is upright.\r\n ctx.rotate(startAngle + arcSize \/ 2 + Math.PI \/ 2);\r\n ctx.textAlign = 'center';\r\n ctx.fillStyle = '#333333'; \/\/ Dark text color\r\n ctx.font = 'bold 20px Inter';\r\n \/\/ Position text in the middle of the segment, slightly offset for readability\r\n ctx.fillText(entries[i], 0, -radius * 0.65); \/\/ Adjusted Y position for better visibility\r\n ctx.restore();\r\n }\r\n }\r\n\r\n \/\/ Function to update the entries list in the UI\r\n function updateEntriesList() {\r\n entriesList.innerHTML = ''; \/\/ Clear existing list\r\n entries.forEach((entry, index) => {\r\n const entryDiv = document.createElement('div');\r\n entryDiv.className = 'entry-item';\r\n entryDiv.innerHTML = `\r\n <span>${entry}<\/span>\r\n <button data-index=\"${index}\">Remove<\/button>\r\n `;\r\n entriesList.appendChild(entryDiv);\r\n });\r\n\r\n \/\/ Add event listeners to new remove buttons\r\n entriesList.querySelectorAll('button').forEach(button => {\r\n button.addEventListener('click', (event) => {\r\n const indexToRemove = parseInt(event.target.dataset.index);\r\n removeEntry(indexToRemove);\r\n });\r\n });\r\n\r\n drawWheel(); \/\/ Redraw wheel with updated entries\r\n }\r\n\r\n \/\/ Function to add a new entry\r\n function addEntry() {\r\n const newEntry = newEntryInput.value.trim();\r\n if (newEntry && entries.length < 15) { \/\/ Limit entries to 15 for readability\r\n entries.push(newEntry);\r\n newEntryInput.value = ''; \/\/ Clear input\r\n updateEntriesList();\r\n resultBox.classList.add('hidden'); \/\/ Hide result when entries change\r\n } else if (entries.length >= 15) {\r\n \/\/ In a real app, you might show a custom modal here instead of console log\r\n console.log(\"Maximum 15 entries allowed for better readability.\");\r\n }\r\n }\r\n\r\n \/\/ Function to remove an entry\r\n function removeEntry(index) {\r\n if (entries.length > 1) { \/\/ Ensure at least one entry remains\r\n entries.splice(index, 1);\r\n updateEntriesList();\r\n resultBox.classList.add('hidden'); \/\/ Hide result when entries change\r\n } else {\r\n console.log(\"Cannot remove the last entry.\");\r\n }\r\n }\r\n\r\n \/\/ Spin the wheel\r\n function spinWheel() {\r\n if (spinning || entries.length === 0) return;\r\n spinning = true;\r\n resultBox.classList.add('hidden'); \/\/ Hide previous result\r\n\r\n const totalRevolutions = 5 + Math.random() * 5; \/\/ Spin 5-10 full revolutions\r\n const winningIndex = Math.floor(Math.random() * entries.length);\r\n const arcSize = (2 * Math.PI) \/ entries.length;\r\n \/\/ Calculate target angle: land exactly in the middle of the winning segment\r\n \/\/ The arrow points right, so we want the winning segment's center to align with the rightmost point (0 radians or 2*PI)\r\n \/\/ The segments are drawn clockwise starting from the right (0 radians).\r\n \/\/ A segment's center is at (startAngle + endAngle) \/ 2.\r\n \/\/ We need to rotate the wheel such that the center of the winning segment points to the right.\r\n \/\/ The current rotation is applied *before* drawing, so we need to calculate the *required* currentRotation.\r\n \/\/ If the winning segment's center is at `(winningIndex * arcSize + arcSize \/ 2)`,\r\n \/\/ then we need to rotate the wheel by `-(winningIndex * arcSize + arcSize \/ 2)`.\r\n \/\/ We also need to add 2*PI to make it positive and ensure it lands correctly.\r\n const targetSegmentCenterAngle = winningIndex * arcSize + arcSize \/ 2;\r\n const targetRotation = (2 * Math.PI - targetSegmentCenterAngle + currentRotation) % (2 * Math.PI);\r\n\r\n\r\n \/\/ Add full revolutions to target angle\r\n const finalAngle = totalRevolutions * (2 * Math.PI) + targetRotation;\r\n\r\n const duration = 5000; \/\/ 5 seconds spin duration\r\n const startTime = performance.now();\r\n\r\n function animateSpin(currentTime) {\r\n const elapsedTime = currentTime - startTime;\r\n const progress = Math.min(elapsedTime \/ duration, 1);\r\n\r\n \/\/ Ease-out cubic function for deceleration\r\n const easedProgress = 1 - Math.pow(1 - progress, 3);\r\n\r\n currentRotation = (finalAngle * easedProgress) % (2 * Math.PI);\r\n drawWheel();\r\n\r\n if (progress < 1) {\r\n requestAnimationFrame(animateSpin);\r\n } else {\r\n spinning = false;\r\n \/\/ Ensure currentRotation is positive and within 0 to 2*PI\r\n currentRotation = currentRotation % (2 * Math.PI);\r\n if (currentRotation < 0) currentRotation += (2 * Math.PI);\r\n\r\n \/\/ Determine winner based on the final rotation and the arrow position\r\n \/\/ The arrow is at the right (0 radians relative to the wheel's center).\r\n \/\/ We need to find which segment is under the arrow.\r\n \/\/ The segments are drawn from startAngle to endAngle.\r\n \/\/ The angle of the arrow relative to the wheel's current rotation is effectively 0.\r\n \/\/ We need to find which segment contains the angle (0 - currentRotation) modulo 2*PI.\r\n let effectiveArrowAngle = (2 * Math.PI - currentRotation) % (2 * Math.PI);\r\n if (effectiveArrowAngle < 0) effectiveArrowAngle += (2 * Math.PI);\r\n\r\n let detectedWinnerIndex = -1;\r\n for (let i = 0; i < entries.length; i++) {\r\n const segmentStartAngle = i * arcSize;\r\n const segmentEndAngle = (i + 1) * arcSize;\r\n\r\n if (effectiveArrowAngle >= segmentStartAngle && effectiveArrowAngle < segmentEndAngle) {\r\n detectedWinnerIndex = i;\r\n break;\r\n }\r\n }\r\n\r\n if (detectedWinnerIndex !== -1) {\r\n winnerNameSpan.textContent = entries[detectedWinnerIndex];\r\n resultBox.classList.remove('hidden');\r\n spinCounter++; \/\/ Increment spin counter\r\n spinCountBox.textContent = spinCounter; \/\/ Update display\r\n } else {\r\n \/\/ Fallback in case calculation is slightly off due to floating point\r\n \/\/ This picks the entry that the pointer is closest to.\r\n \/\/ This part might need more robust logic if the primary calculation fails often.\r\n const closestIndex = Math.floor(effectiveArrowAngle \/ arcSize);\r\n winnerNameSpan.textContent = entries[closestIndex % entries.length];\r\n resultBox.classList.remove('hidden');\r\n spinCounter++; \/\/ Increment spin counter\r\n spinCountBox.textContent = spinCounter; \/\/ Update display\r\n }\r\n }\r\n }\r\n requestAnimationFrame(animateSpin);\r\n }\r\n\r\n \/\/ Event Listeners\r\n spinnerCenter.addEventListener('click', spinWheel);\r\n addEntryBtn.addEventListener('click', addEntry);\r\n newEntryInput.addEventListener('keypress', (event) => {\r\n if (event.key === 'Enter') {\r\n addEntry();\r\n }\r\n });\r\n document.addEventListener('keydown', (event) => {\r\n if (event.ctrlKey && event.key === 'Enter') {\r\n spinWheel();\r\n }\r\n });\r\n\r\n \/\/ Initial setup\r\n window.onload = function() {\r\n updateEntriesList(); \/\/ Populate initial entries and draw wheel\r\n spinCountBox.textContent = spinCounter; \/\/ Initialize spin counter display\r\n \/\/ Adjust canvas size to be responsive\r\n function resizeCanvas() {\r\n const containerWidth = canvas.parentElement.clientWidth;\r\n const size = Math.min(containerWidth, 500); \/\/ Max size 500px, but responsive\r\n canvas.width = size;\r\n canvas.height = size;\r\n drawWheel(); \/\/ Redraw wheel on resize\r\n }\r\n resizeCanvas(); \/\/ Initial resize\r\n window.addEventListener('resize', resizeCanvas); \/\/ Listen for window resize\r\n };\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b3b8bc3 elementor-widget elementor-widget-spacer\" data-id=\"b3b8bc3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Spin the Wheel Spin the Wheel! Spin Winner: Wheel used: 0 times Entries Add Entry<\/p>","protected":false},"author":1,"featured_media":772,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-825","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Wheel Spinner | H Web Dev.<\/title>\n<meta name=\"description\" content=\"Use the free Wheel Spinner tool to pick a random name, option, or winner. Customize your entries and choose randomly, no signup needed.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/h-webdev.com\/fr\/wheel-spinner\/\" \/>\n<meta property=\"og:locale\" content=\"fr_CA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wheel Spinner | H Web Dev.\" \/>\n<meta property=\"og:description\" content=\"Use the free Wheel Spinner tool to pick a random name, option, or winner. Customize your entries and choose randomly, no signup needed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/h-webdev.com\/fr\/wheel-spinner\/\" \/>\n<meta property=\"og:site_name\" content=\"H Web Dev.\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-19T13:33:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"525\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimation du temps de lecture\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/\",\"name\":\"Wheel Spinner | H Web Dev.\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.png\",\"datePublished\":\"2025-07-27T03:39:23+00:00\",\"dateModified\":\"2026-01-19T13:33:00+00:00\",\"description\":\"Use the free Wheel Spinner tool to pick a random name, option, or winner. Customize your entries and choose randomly, no signup needed.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/#breadcrumb\"},\"inLanguage\":\"fr-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/#primaryimage\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.png\",\"contentUrl\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.png\",\"width\":525,\"height\":525,\"caption\":\"site logo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/h-webdev.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wheel Spinner\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/\",\"name\":\"H Web Dev.\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#\\\/schema\\\/person\\\/f61edc8649dfc6bdf57926a9b5328a90\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-CA\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#\\\/schema\\\/person\\\/f61edc8649dfc6bdf57926a9b5328a90\",\"name\":\"servinhugor@gmail.com\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\",\"contentUrl\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\",\"width\":525,\"height\":525,\"caption\":\"servinhugor@gmail.com\"},\"logo\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\"},\"sameAs\":[\"https:\\\/\\\/h-webdev.com\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Wheel Spinner | H Web Dev.","description":"Use the free Wheel Spinner tool to pick a random name, option, or winner. Customize your entries and choose randomly, no signup needed.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/h-webdev.com\/fr\/wheel-spinner\/","og_locale":"fr_CA","og_type":"article","og_title":"Wheel Spinner | H Web Dev.","og_description":"Use the free Wheel Spinner tool to pick a random name, option, or winner. Customize your entries and choose randomly, no signup needed.","og_url":"https:\/\/h-webdev.com\/fr\/wheel-spinner\/","og_site_name":"H Web Dev.","article_modified_time":"2026-01-19T13:33:00+00:00","og_image":[{"width":525,"height":525,"url":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Estimation du temps de lecture":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/h-webdev.com\/wheel-spinner\/","url":"https:\/\/h-webdev.com\/wheel-spinner\/","name":"Wheel Spinner | H Web Dev.","isPartOf":{"@id":"https:\/\/h-webdev.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/h-webdev.com\/wheel-spinner\/#primaryimage"},"image":{"@id":"https:\/\/h-webdev.com\/wheel-spinner\/#primaryimage"},"thumbnailUrl":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","datePublished":"2025-07-27T03:39:23+00:00","dateModified":"2026-01-19T13:33:00+00:00","description":"Use the free Wheel Spinner tool to pick a random name, option, or winner. Customize your entries and choose randomly, no signup needed.","breadcrumb":{"@id":"https:\/\/h-webdev.com\/wheel-spinner\/#breadcrumb"},"inLanguage":"fr-CA","potentialAction":[{"@type":"ReadAction","target":["https:\/\/h-webdev.com\/wheel-spinner\/"]}]},{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/h-webdev.com\/wheel-spinner\/#primaryimage","url":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","contentUrl":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","width":525,"height":525,"caption":"site logo"},{"@type":"BreadcrumbList","@id":"https:\/\/h-webdev.com\/wheel-spinner\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/h-webdev.com\/"},{"@type":"ListItem","position":2,"name":"Wheel Spinner"}]},{"@type":"WebSite","@id":"https:\/\/h-webdev.com\/en\/#website","url":"https:\/\/h-webdev.com\/en\/","name":"H Web Dev.","description":"","publisher":{"@id":"https:\/\/h-webdev.com\/en\/#\/schema\/person\/f61edc8649dfc6bdf57926a9b5328a90"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/h-webdev.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-CA"},{"@type":["Person","Organization"],"@id":"https:\/\/h-webdev.com\/en\/#\/schema\/person\/f61edc8649dfc6bdf57926a9b5328a90","name":"servinhugor@gmail.com","image":{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp","url":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp","contentUrl":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp","width":525,"height":525,"caption":"servinhugor@gmail.com"},"logo":{"@id":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp"},"sameAs":["https:\/\/h-webdev.com\/"]}]}},"uagb_featured_image_src":{"full":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"thumbnail":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo-150x150.png",150,150,true],"medium":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo-300x300.png",300,300,true],"medium_large":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"large":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"1536x1536":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"2048x2048":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"trp-custom-language-flag":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo-12x12.png",12,12,true]},"uagb_author_info":{"display_name":"servinhugor@gmail.com","author_link":"https:\/\/h-webdev.com\/fr\/author\/servinhugorgmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Spin the Wheel Spin the Wheel! Spin Winner: Wheel used: 0 times Entries Add Entry","_links":{"self":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages\/825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/comments?post=825"}],"version-history":[{"count":8,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages\/825\/revisions"}],"predecessor-version":[{"id":833,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages\/825\/revisions\/833"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/media\/772"}],"wp:attachment":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/media?parent=825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Spin the Wheel<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \r\n }\r\n .container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n max-width: 1200px;\r\n width: 100%;\r\n background-color: #ffffff;\r\n border-radius: 16px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n padding: 30px;\r\n }\r\n @media (min-width: 768px) {\r\n .container {\r\n flex-direction: row;\r\n }\r\n }\r\n .wheel-section, .entries-section {\r\n flex: 1;\r\n padding: 20px;\r\n border-radius: 12px;\r\n background-color: #f9fafb;\r\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);\r\n }\r\n .wheel-section {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n }\r\n canvas {\r\n display: block;\r\n border-radius: 50%;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n background-color: #ffffff;\r\n max-width: 100%; \/* Ensure canvas scales down on smaller screens *\/\r\n height: auto; \/* Maintain aspect ratio *\/\r\n }\r\n .spinner-center {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 80px;\r\n height: 80px;\r\n background-color: #ffffff;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: bold;\r\n color: #333;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n text-align: center;\r\n user-select: none;\r\n font-size: 0.9rem;\r\n line-height: 1.2;\r\n padding: 5px;\r\n }\r\n .arrow {\r\n position: absolute;\r\n right: -15px; \/* Adjust as needed *\/\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 0;\r\n height: 0;\r\n border-top: 15px solid transparent;\r\n border-bottom: 15px solid transparent;\r\n border-left: 20px solid #ff4d4d; \/* Red arrow *\/\r\n z-index: 10;\r\n }\r\n .entry-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 8px 12px;\r\n background-color: #ffffff;\r\n border-radius: 8px;\r\n margin-bottom: 8px;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\r\n }\r\n .entry-item:last-child {\r\n margin-bottom: 0;\r\n }\r\n .entry-item button {\r\n background-color: #ef4444; \/* Red-500 *\/\r\n color: white;\r\n padding: 4px 8px;\r\n border-radius: 6px;\r\n font-size: 0.8rem;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n }\r\n .entry-item button:hover {\r\n background-color: #dc2626; \/* Red-600 *\/\r\n }\r\n .result-box {\r\n background-color: #e0f2fe; \/* Light blue *\/\r\n border: 2px solid #38b2ac; \/* Teal-500 *\/\r\n color: #1a202c; \/* Dark grey *\/\r\n padding: 15px;\r\n border-radius: 10px;\r\n text-align: center;\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n margin-top: 20px;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\r\n }\r\n .btn-primary {\r\n background-color: #38b2ac; \/* Teal-500 *\/\r\n color: white;\r\n padding: 10px 20px;\r\n border-radius: 8px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n }\r\n .btn-primary:hover {\r\n background-color: #319795; \/* Teal-600 *\/\r\n }\r\n .add-entry-section {\r\n display: flex;\r\n gap: 10px;\r\n margin-top: 15px;\r\n }\r\n .add-entry-section input {\r\n flex-grow: 1;\r\n padding: 10px;\r\n border: 1px solid #cbd5e0; \/* Gray-300 *\/\r\n border-radius: 8px;\r\n font-size: 1rem;\r\n }\r\n .add-entry-section input:focus {\r\n outline: none;\r\n border-color: #38b2ac; \/* Teal-500 *\/\r\n box-shadow: 0 0 0 2px rgba(56, 178, 172, 0.2);\r\n }\r\n .spin-count-box {\r\n background-color: #fffbe0; \/* Light yellow *\/\r\n border: 2px solid #f6e05e; \/* Yellow-400 *\/\r\n color: #4a5568; \/* Gray-700 *\/\r\n padding: 10px;\r\n border-radius: 8px;\r\n text-align: center;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-top: 15px;\r\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-100 flex items-center justify-center min-h-screen p-4\">\r\n <div class=\"container flex flex-col md:flex-row gap-8\">\r\n \r\n <div class=\"wheel-section flex-1 flex flex-col items-center justify-center p-6 relative\">\r\n <h2 class=\"text-2xl font-bold mb-6 text-gray-800\">Spin the Wheel!<\/h2>\r\n <div class=\"relative w-full max-w-lg aspect-square flex items-center justify-center\">\r\n <canvas id=\"wheelCanvas\" width=\"500\" height=\"500\" class=\"rounded-full\"><\/canvas>\r\n <div id=\"spinnerCenter\" class=\"spinner-center\">\r\n Spin\r\n <\/div>\r\n <div class=\"arrow\"><\/div>\r\n <\/div>\r\n <div id=\"resultBox\" class=\"result-box mt-8 w-full max-w-md hidden\">\r\n Winner: <span id=\"winnerName\"><\/span>\r\n <\/div>\r\n <div id=\"spinCountBox\" class=\"spin-count-box mt-4 w-full max-w-md\">\r\n Wheel used: <span id=\"spinCount\">0<\/span> times\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"entries-section flex-1 p-6\">\r\n <h2 class=\"text-2xl font-bold mb-6 text-gray-800\">Entries<\/h2>\r\n <div class=\"add-entry-section\">\r\n <input type=\"text\" id=\"newEntryInput\" placeholder=\"Add a new entry\" class=\"flex-grow p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-teal-500\">\r\n <button id=\"addEntryBtn\" class=\"btn-primary px-4 py-2\">Add Entry<\/button>\r\n <\/div>\r\n <div id=\"entriesList\" class=\"mt-6 space-y-3 max-h-96 overflow-y-auto\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n const canvas = document.getElementById('wheelCanvas');\r\n const ctx = canvas.getContext('2d');\r\n const spinnerCenter = document.getElementById('spinnerCenter');\r\n const newEntryInput = document.getElementById('newEntryInput');\r\n const addEntryBtn = document.getElementById('addEntryBtn');\r\n const entriesList = document.getElementById('entriesList');\r\n const resultBox = document.getElementById('resultBox');\r\n const winnerNameSpan = document.getElementById('winnerName');\r\n const spinCountBox = document.getElementById('spinCount'); \/\/ Element to display spin count\r\n\r\n \/\/ Initial entries\r\n let entries = [\"Ali\", \"Beatriz\", \"Charles\", \"Diya\", \"Eric\", \"Fatima\", \"Gabriel\", \"Hanna\"];\r\n const colors = [\r\n '#FFD700', '#FF6347', '#6A5ACD', '#3CB371', '#FF8C00', '#4682B4', '#DA70D6', '#20B2AA'\r\n ]; \/\/ Gold, Tomato, SlateBlue, MediumSeaGreen, DarkOrange, SteelBlue, Orchid, LightSeaGreen\r\n\r\n let currentRotation = 0; \/\/ Current rotation angle of the wheel\r\n let spinning = false; \/\/ Flag to prevent multiple spins\r\n let spinCounter = 0; \/\/ Counter for wheel usage\r\n\r\n \/\/ Function to draw the wheel\r\n function drawWheel() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height); \/\/ Clear the canvas\r\n const centerX = canvas.width \/ 2;\r\n const centerY = canvas.height \/ 2;\r\n const radius = Math.min(centerX, centerY) * 0.9; \/\/ Slightly smaller radius for padding\r\n\r\n const arcSize = (2 * Math.PI) \/ entries.length;\r\n\r\n for (let i = 0; i < entries.length; i++) {\r\n const startAngle = currentRotation + i * arcSize;\r\n const endAngle = startAngle + arcSize;\r\n\r\n \/\/ Draw segment\r\n ctx.beginPath();\r\n ctx.arc(centerX, centerY, radius, startAngle, endAngle);\r\n ctx.lineTo(centerX, centerY);\r\n ctx.closePath();\r\n ctx.fillStyle = colors[i % colors.length]; \/\/ Cycle through colors\r\n ctx.fill();\r\n ctx.strokeStyle = '#ffffff'; \/\/ White border for segments\r\n ctx.lineWidth = 2;\r\n ctx.stroke();\r\n\r\n \/\/ Draw text (upright, parallel to the top of the wheel)\r\n ctx.save();\r\n ctx.translate(centerX, centerY);\r\n \/\/ Rotate text to be upright relative to the canvas, and position it within the segment\r\n \/\/ The angle `startAngle + arcSize \/ 2` gives the center of the segment.\r\n \/\/ Adding `Math.PI \/ 2` rotates it so the text is upright.\r\n ctx.rotate(startAngle + arcSize \/ 2 + Math.PI \/ 2);\r\n ctx.textAlign = 'center';\r\n ctx.fillStyle = '#333333'; \/\/ Dark text color\r\n ctx.font = 'bold 20px Inter';\r\n \/\/ Position text in the middle of the segment, slightly offset for readability\r\n ctx.fillText(entries[i], 0, -radius * 0.65); \/\/ Adjusted Y position for better visibility\r\n ctx.restore();\r\n }\r\n }\r\n\r\n \/\/ Function to update the entries list in the UI\r\n function updateEntriesList() {\r\n entriesList.innerHTML = ''; \/\/ Clear existing list\r\n entries.forEach((entry, index) => {\r\n const entryDiv = document.createElement('div');\r\n entryDiv.className = 'entry-item';\r\n entryDiv.innerHTML = `\r\n <span>${entry}<\/span>\r\n <button data-index=\"${index}\">Remove<\/button>\r\n `;\r\n entriesList.appendChild(entryDiv);\r\n });\r\n\r\n \/\/ Add event listeners to new remove buttons\r\n entriesList.querySelectorAll('button').forEach(button => {\r\n button.addEventListener('click', (event) => {\r\n const indexToRemove = parseInt(event.target.dataset.index);\r\n removeEntry(indexToRemove);\r\n });\r\n });\r\n\r\n drawWheel(); \/\/ Redraw wheel with updated entries\r\n }\r\n\r\n \/\/ Function to add a new entry\r\n function addEntry() {\r\n const newEntry = newEntryInput.value.trim();\r\n if (newEntry && entries.length < 15) { \/\/ Limit entries to 15 for readability\r\n entries.push(newEntry);\r\n newEntryInput.value = ''; \/\/ Clear input\r\n updateEntriesList();\r\n resultBox.classList.add('hidden'); \/\/ Hide result when entries change\r\n } else if (entries.length >= 15) {\r\n \/\/ In a real app, you might show a custom modal here instead of console log\r\n console.log(\"Maximum 15 entries allowed for better readability.\");\r\n }\r\n }\r\n\r\n \/\/ Function to remove an entry\r\n function removeEntry(index) {\r\n if (entries.length > 1) { \/\/ Ensure at least one entry remains\r\n entries.splice(index, 1);\r\n updateEntriesList();\r\n resultBox.classList.add('hidden'); \/\/ Hide result when entries change\r\n } else {\r\n console.log(\"Cannot remove the last entry.\");\r\n }\r\n }\r\n\r\n \/\/ Spin the wheel\r\n function spinWheel() {\r\n if (spinning || entries.length === 0) return;\r\n spinning = true;\r\n resultBox.classList.add('hidden'); \/\/ Hide previous result\r\n\r\n const totalRevolutions = 5 + Math.random() * 5; \/\/ Spin 5-10 full revolutions\r\n const winningIndex = Math.floor(Math.random() * entries.length);\r\n const arcSize = (2 * Math.PI) \/ entries.length;\r\n \/\/ Calculate target angle: land exactly in the middle of the winning segment\r\n \/\/ The arrow points right, so we want the winning segment's center to align with the rightmost point (0 radians or 2*PI)\r\n \/\/ The segments are drawn clockwise starting from the right (0 radians).\r\n \/\/ A segment's center is at (startAngle + endAngle) \/ 2.\r\n \/\/ We need to rotate the wheel such that the center of the winning segment points to the right.\r\n \/\/ The current rotation is applied *before* drawing, so we need to calculate the *required* currentRotation.\r\n \/\/ If the winning segment's center is at `(winningIndex * arcSize + arcSize \/ 2)`,\r\n \/\/ then we need to rotate the wheel by `-(winningIndex * arcSize + arcSize \/ 2)`.\r\n \/\/ We also need to add 2*PI to make it positive and ensure it lands correctly.\r\n const targetSegmentCenterAngle = winningIndex * arcSize + arcSize \/ 2;\r\n const targetRotation = (2 * Math.PI - targetSegmentCenterAngle + currentRotation) % (2 * Math.PI);\r\n\r\n\r\n \/\/ Add full revolutions to target angle\r\n const finalAngle = totalRevolutions * (2 * Math.PI) + targetRotation;\r\n\r\n const duration = 5000; \/\/ 5 seconds spin duration\r\n const startTime = performance.now();\r\n\r\n function animateSpin(currentTime) {\r\n const elapsedTime = currentTime - startTime;\r\n const progress = Math.min(elapsedTime \/ duration, 1);\r\n\r\n \/\/ Ease-out cubic function for deceleration\r\n const easedProgress = 1 - Math.pow(1 - progress, 3);\r\n\r\n currentRotation = (finalAngle * easedProgress) % (2 * Math.PI);\r\n drawWheel();\r\n\r\n if (progress < 1) {\r\n requestAnimationFrame(animateSpin);\r\n } else {\r\n spinning = false;\r\n \/\/ Ensure currentRotation is positive and within 0 to 2*PI\r\n currentRotation = currentRotation % (2 * Math.PI);\r\n if (currentRotation < 0) currentRotation += (2 * Math.PI);\r\n\r\n \/\/ Determine winner based on the final rotation and the arrow position\r\n \/\/ The arrow is at the right (0 radians relative to the wheel's center).\r\n \/\/ We need to find which segment is under the arrow.\r\n \/\/ The segments are drawn from startAngle to endAngle.\r\n \/\/ The angle of the arrow relative to the wheel's current rotation is effectively 0.\r\n \/\/ We need to find which segment contains the angle (0 - currentRotation) modulo 2*PI.\r\n let effectiveArrowAngle = (2 * Math.PI - currentRotation) % (2 * Math.PI);\r\n if (effectiveArrowAngle < 0) effectiveArrowAngle += (2 * Math.PI);\r\n\r\n let detectedWinnerIndex = -1;\r\n for (let i = 0; i < entries.length; i++) {\r\n const segmentStartAngle = i * arcSize;\r\n const segmentEndAngle = (i + 1) * arcSize;\r\n\r\n if (effectiveArrowAngle >= segmentStartAngle && effectiveArrowAngle < segmentEndAngle) {\r\n detectedWinnerIndex = i;\r\n break;\r\n }\r\n }\r\n\r\n if (detectedWinnerIndex !== -1) {\r\n winnerNameSpan.textContent = entries[detectedWinnerIndex];\r\n resultBox.classList.remove('hidden');\r\n spinCounter++; \/\/ Increment spin counter\r\n spinCountBox.textContent = spinCounter; \/\/ Update display\r\n } else {\r\n \/\/ Fallback in case calculation is slightly off due to floating point\r\n \/\/ This picks the entry that the pointer is closest to.\r\n \/\/ This part might need more robust logic if the primary calculation fails often.\r\n const closestIndex = Math.floor(effectiveArrowAngle \/ arcSize);\r\n winnerNameSpan.textContent = entries[closestIndex % entries.length];\r\n resultBox.classList.remove('hidden');\r\n spinCounter++; \/\/ Increment spin counter\r\n spinCountBox.textContent = spinCounter; \/\/ Update display\r\n }\r\n }\r\n }\r\n requestAnimationFrame(animateSpin);\r\n }\r\n\r\n \/\/ Event Listeners\r\n spinnerCenter.addEventListener('click', spinWheel);\r\n addEntryBtn.addEventListener('click', addEntry);\r\n newEntryInput.addEventListener('keypress', (event) => {\r\n if (event.key === 'Enter') {\r\n addEntry();\r\n }\r\n });\r\n document.addEventListener('keydown', (event) => {\r\n if (event.ctrlKey && event.key === 'Enter') {\r\n spinWheel();\r\n }\r\n });\r\n\r\n \/\/ Initial setup\r\n window.onload = function() {\r\n updateEntriesList(); \/\/ Populate initial entries and draw wheel\r\n spinCountBox.textContent = spinCounter; \/\/ Initialize spin counter display\r\n \/\/ Adjust canvas size to be responsive\r\n function resizeCanvas() {\r\n const containerWidth = canvas.parentElement.clientWidth;\r\n const size = Math.min(containerWidth, 500); \/\/ Max size 500px, but responsive\r\n canvas.width = size;\r\n canvas.height = size;\r\n drawWheel(); \/\/ Redraw wheel on resize\r\n }\r\n resizeCanvas(); \/\/ Initial resize\r\n window.addEventListener('resize', resizeCanvas); \/\/ Listen for window resize\r\n };\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b3b8bc3 elementor-widget elementor-widget-spacer\" data-id=\"b3b8bc3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Spin the Wheel Spin the Wheel! Spin Winner: Wheel used: 0 times Entries Add Entry<\/p>","protected":false},"author":1,"featured_media":772,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-825","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Wheel Spinner | H Web Dev.<\/title>\n<meta name=\"description\" content=\"Use the free Wheel Spinner tool to pick a random name, option, or winner. Customize your entries and choose randomly, no signup needed.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/h-webdev.com\/fr\/wheel-spinner\/\" \/>\n<meta property=\"og:locale\" content=\"fr_CA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wheel Spinner | H Web Dev.\" \/>\n<meta property=\"og:description\" content=\"Use the free Wheel Spinner tool to pick a random name, option, or winner. Customize your entries and choose randomly, no signup needed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/h-webdev.com\/fr\/wheel-spinner\/\" \/>\n<meta property=\"og:site_name\" content=\"H Web Dev.\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-19T13:33:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"525\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimation du temps de lecture\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/\",\"name\":\"Wheel Spinner | H Web Dev.\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.png\",\"datePublished\":\"2025-07-27T03:39:23+00:00\",\"dateModified\":\"2026-01-19T13:33:00+00:00\",\"description\":\"Use the free Wheel Spinner tool to pick a random name, option, or winner. Customize your entries and choose randomly, no signup needed.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/#breadcrumb\"},\"inLanguage\":\"fr-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/#primaryimage\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.png\",\"contentUrl\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.png\",\"width\":525,\"height\":525,\"caption\":\"site logo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wheel-spinner\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/h-webdev.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wheel Spinner\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/\",\"name\":\"H Web Dev.\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#\\\/schema\\\/person\\\/f61edc8649dfc6bdf57926a9b5328a90\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-CA\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#\\\/schema\\\/person\\\/f61edc8649dfc6bdf57926a9b5328a90\",\"name\":\"servinhugor@gmail.com\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\",\"contentUrl\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\",\"width\":525,\"height\":525,\"caption\":\"servinhugor@gmail.com\"},\"logo\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\"},\"sameAs\":[\"https:\\\/\\\/h-webdev.com\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Wheel Spinner | H Web Dev.","description":"Use the free Wheel Spinner tool to pick a random name, option, or winner. Customize your entries and choose randomly, no signup needed.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/h-webdev.com\/fr\/wheel-spinner\/","og_locale":"fr_CA","og_type":"article","og_title":"Wheel Spinner | H Web Dev.","og_description":"Use the free Wheel Spinner tool to pick a random name, option, or winner. Customize your entries and choose randomly, no signup needed.","og_url":"https:\/\/h-webdev.com\/fr\/wheel-spinner\/","og_site_name":"H Web Dev.","article_modified_time":"2026-01-19T13:33:00+00:00","og_image":[{"width":525,"height":525,"url":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Estimation du temps de lecture":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/h-webdev.com\/wheel-spinner\/","url":"https:\/\/h-webdev.com\/wheel-spinner\/","name":"Wheel Spinner | H Web Dev.","isPartOf":{"@id":"https:\/\/h-webdev.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/h-webdev.com\/wheel-spinner\/#primaryimage"},"image":{"@id":"https:\/\/h-webdev.com\/wheel-spinner\/#primaryimage"},"thumbnailUrl":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","datePublished":"2025-07-27T03:39:23+00:00","dateModified":"2026-01-19T13:33:00+00:00","description":"Use the free Wheel Spinner tool to pick a random name, option, or winner. Customize your entries and choose randomly, no signup needed.","breadcrumb":{"@id":"https:\/\/h-webdev.com\/wheel-spinner\/#breadcrumb"},"inLanguage":"fr-CA","potentialAction":[{"@type":"ReadAction","target":["https:\/\/h-webdev.com\/wheel-spinner\/"]}]},{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/h-webdev.com\/wheel-spinner\/#primaryimage","url":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","contentUrl":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","width":525,"height":525,"caption":"site logo"},{"@type":"BreadcrumbList","@id":"https:\/\/h-webdev.com\/wheel-spinner\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/h-webdev.com\/"},{"@type":"ListItem","position":2,"name":"Wheel Spinner"}]},{"@type":"WebSite","@id":"https:\/\/h-webdev.com\/en\/#website","url":"https:\/\/h-webdev.com\/en\/","name":"H Web Dev.","description":"","publisher":{"@id":"https:\/\/h-webdev.com\/en\/#\/schema\/person\/f61edc8649dfc6bdf57926a9b5328a90"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/h-webdev.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-CA"},{"@type":["Person","Organization"],"@id":"https:\/\/h-webdev.com\/en\/#\/schema\/person\/f61edc8649dfc6bdf57926a9b5328a90","name":"servinhugor@gmail.com","image":{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp","url":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp","contentUrl":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp","width":525,"height":525,"caption":"servinhugor@gmail.com"},"logo":{"@id":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp"},"sameAs":["https:\/\/h-webdev.com\/"]}]}},"uagb_featured_image_src":{"full":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"thumbnail":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo-150x150.png",150,150,true],"medium":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo-300x300.png",300,300,true],"medium_large":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"large":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"1536x1536":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"2048x2048":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"trp-custom-language-flag":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo-12x12.png",12,12,true]},"uagb_author_info":{"display_name":"servinhugor@gmail.com","author_link":"https:\/\/h-webdev.com\/fr\/author\/servinhugorgmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"Spin the Wheel Spin the Wheel! Spin Winner: Wheel used: 0 times Entries Add Entry","_links":{"self":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages\/825","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/comments?post=825"}],"version-history":[{"count":8,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages\/825\/revisions"}],"predecessor-version":[{"id":833,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages\/825\/revisions\/833"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/media\/772"}],"wp:attachment":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/media?parent=825"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}