How to Use Spin The Wheel!

1. Introduction

Welcome to Spin The Wheel! Our Spin The Wheel application is a versatile tool that allows you to create a customizable spinning wheel with your chosen entries (names, items, tasks, decisions, etc.). Simply input your options, spin the wheel, and let a random result be chosen. It's perfect for conducting raffles, making group decisions, engaging classroom activities, spicing up remote events, and much more. When you need to make an impartial choice, let the wheel decide!

2. Getting Started

Getting started is quick and easy. When you first open the application (index.html), you'll be greeted with a pre-populated list of example names in the "Entries" input area and a colorful wheel ready for action.

• Instant Action: Click the prominent "Spin!" button in the Controls Area or the inviting "Click to Spin!" overlay directly on spin the wheel to see it in motion.
• Your Own Content: To personalize your Spin The Wheel experience, navigate to the "Entries" tab and simply edit or replace the example text in the "Entries Text Area" with your own items.

3. Main Interface Overview

The application interface is primarily split into two main sections: the Wheel Area and the Controls Area. On larger desktop screens, these sections appear side-by-side. On smaller mobile screens, the Controls Area is conveniently positioned below spin the Wheel Area.

3.1 Wheel Area

This is where the visual excitement unfolds.

• Wheel Canvas: The dynamic, circular canvas where your entries are rendered as distinct, colored segments of spin the wheel.
• Wheel Overlay: When spin the wheel is idle, a semi-transparent overlay appears with the text "Click to Spin!". Clicking this will initiate the spin. This overlay disappears during the spin.
• Pointer: A triangular pointer (positioned on the right edge for desktop view and at the top center for mobile view) clearly indicates which segment is the winner once spin the wheel comes to a stop.

3.2 Controls Area

This comprehensive section houses all the tools you need to input your data, manage your entries, and customize the wheel's appearance and behavior.

• Tabs: Entries & Results

  At the top of the Controls Area, you'll find two main tabs:

  • Entries Tab: Your primary workspace for managing wheel content.
    • Entries Text Area: Input items here, one per line.
    • Weighted Entries: Format: Item Name : Weight (e.g., Option A : 3). Higher weight = higher chance. Default is 1.
    • Entries Count: Shows the number of active entries.
  • Results Tab: Tracks outcomes.
    • Results List Area: Displays winners from the current session (duplicates listed if won multiple times).
    • Results Count: Total number of winners recorded.
  

  Entries tab active, showing text area and count

  

  Results tab active, showing list area and count

• Controls Header Actions
  • Hide Checkbox ("Hide"): Collapses the Controls Area for a focused wheel view.
  • Advanced Settings Button (⚙️): Toggles the Advanced Settings panel.
• Advanced Settings Panel (Collapsible)
  

  Advanced Settings panel

  • Enable Sounds: Checkbox for all sound effects.
  • Base Spin Duration (seconds): Input (1-10s) for minimum spin time.
  • Font Family: Dropdown to select font for wheel text.
  • Font Size (px): Input (8-24px) for wheel text size.
  • Custom Segment Colors: 10 color pickers for the first 10 entries, overriding the theme. "Reset Custom Colors" button reverts to theme.
• Action Buttons (Entries Tab)
  

  Shuffle, Sort, Import, Export buttons

  • 🔀 Shuffle: Randomly reorders entries.
  • ⇅ Sort: Sorts entries alphabetically.
  • 📥 Import: Load entries from a .txt file.
  • 📤 Export: Save entries to a .txt file.
• Color Theme Selector
  

  Color Theme dropdown

  • "Color Theme:" Dropdown: Choose predefined color palettes.
• Main Controls
  

  Update Wheel and Spin

  • Update Wheel Button: Refreshes wheel display after entry changes without spinning.
  • Spin! Button: Starts the wheel spin.
• Result Display

  Text area below Main Controls showing status messages (e.g., "Spin to select!", "Spinning...").

4. Core Functionality

4.1 Adding and Editing Entries (Including Weighted Entries & Duplicate Handling)

1. Ensure the Entries tab is active.
2. In the Entries Text Area:
   • Type each item on a new line.
   • To assign a weight: Item Name : Weight (e.g., Task X : 2, Task Y : 1). Higher weights mean higher probability. The default weight is 1.
3. Updating spin the Wheel:
   • Click "Update Wheel" or simply click "Spin!" to apply changes.
   • Duplicate Entry Handling: If duplicate names are entered, a confirmation pop-up will ask if you want to remove duplicates (keeping the first occurrence and its weight). Choosing "Cancel" keeps duplicates as separate segments on spin the wheel.

4.2 Spinning the Wheel

1. Ensure your desired entries are in the "Entries" list and spin the wheel is updated.
2. Click the "Spin!" button in the Controls Area OR click the "Click to Spin!" overlay on spin the wheel itself.
3. Spin The wheel will spin for a set duration and then slow down to reveal the selected entry.
4. A Winner Modal (see section 6) will pop up announcing the winner, and confetti will appear (if sounds are enabled).

4.3 Viewing Results

1. After a spin, the winner's name is added to a results list for your Spin The Wheel session.
2. Click the Results tab.
3. The Results List Area will display all winners from the current session, one per line (duplicates are listed each time they win).
4. The Results Count shows the total number of winners recorded in the session.

4.4 Managing Entries (Shuffle, Sort)

These buttons are active when the "Entries" tab is selected.

• Shuffle (🔀): Click to randomly reorder the current list in the "Entries" text area. Spin the wheel will update automatically.
• Sort (⇅): Click to sort the current list in the "Entries" text area alphabetically. Spin the wheel will update automatically.

4.5 Importing and Exporting Entries (Using .txt files)

• Import (📥):
  1. Click the "Import" button.
  2. Your browser's file dialog will open.
  3. Select a plain text file (.txt) containing your list of entries (one entry per line, optionally with : weight).
  4. The entries from the file will replace the current list in the "Entries" text area, and spin the wheel will update.
• Export (📤):
  1. Click the "Export" button.
  2. Your current list of entries (including any weights) will be saved as a lucky_wheel_items.txt file to your computer's default download location.

5. Customization

5.1 Color Themes

1. Locate the "Color Theme:" dropdown menu in the Controls Area.
2. Select a theme (e.g., Classic, Pastel, Vibrant, Earthy)for your Spin The Wheel.
3. Spin the wheel segment colors will instantly update to reflect the chosen theme (unless overridden by Custom Segment Colors).

5.2 Advanced Settings

Click the gear icon (⚙️) to open the Advanced Settings panel.

• Enable Sounds:
  • Toggle the checkbox to enable or disable sound effects for spinning, winning, and button clicks.
  • Note: Browsers may require user interaction (like a click) on the page before sounds can play.
• Base Spin Duration (seconds):
  • Enter a number between 1 and 10 to control the minimum spin time. The default is 3 seconds.
• Font Family & Size (for wheel text):
  • Font Family: Select a font from the dropdown for the text displayed on each wheel segment.
  • Font Size (px): Enter a font size (8-24px) for the text on wheel segments. Larger fonts might get truncated if the segment is small or the name is long.
• Custom Segment Colors:
  1. This section provides 10 color picker inputs.
  2. Each color picker corresponds to an entry in your list, in order (the first picker for the first entry, second for the second, and so on, up to the 10th entry).
  3. Click a color picker to choose a specific color for that segment.
  4. This custom color will override the selected Color Theme for that particular segment.
  5. If you have more than 10 entries, entries 11 onwards will use the selected Color Theme.
  6. Reset Custom Colors Button: Click this to clear all your custom color choices. Spin the wheel will then fully use the selected Color Theme for all segments. A confirmation will be asked.
  

  the 10 color pickers

6. Interacting with Winners (Winner Modal Actions)

Once spin the wheel stops, a modal window pops up:

• Title: "Congratulations!"
• Winner's Name: Displays the name of the selected entry.
• Buttons:
  • Close: Closes the modal. The winner remains in the "Entries" list for future spins. This is the "Normal Mode" of operation.
  • Delete Winner: Removes the winning entry from the "Entries" list and spin the wheel. This allows for an "Elimination Mode" style of play, where items are picked one by one without repetition. Then closes the modal.

7. Layout Options

7.1 Focused Wheel View (Hiding Controls Area)

• To Hide Controls: Check the "Hide" checkbox in the Controls Header. The Controls Area will disappear, and spin the Wheel Area will expand, offering a view similar to a full-screen mode focused on spin the wheel.
  • A "Show Controls" button will appear (usually bottom-right) to restore the Controls Area.
  

  the Hide checkbox

• To Show Controls: Click the "Show Controls" button (if controls are hidden) OR uncheck the "Hide" checkbox.

8. Data Persistence (Automatic Local Saving)

The application automatically saves the following in your web browser's local storage:

• Your list of entries (including weights).
• The selected Color Theme.
• The state of the Advanced Settings panel (expanded or collapsed).
• Sound enabled/disabled state.
• Base spin duration.
• Selected font family and size.
• Your custom segment color choices.

This means when you close the browser tab and reopen Spin The Wheel later (using the same browser), your previous setup will be restored. This data is stored locally in your browser and is not sent to any server.

9. Tips and Notes

• No Internet Required (After Initial Load): Once the page is loaded, you can use the tool offline.
• Clearing Browser Data: If you clear your browser's cache or local storage for this site, your saved entries and settings will be lost. Use "Export" to back up important lists.
• Many Entries: spin the wheel can support many entries, but very long names or a very large number of entries might make the text on segments small or hard to read. Use the Font Size setting to adjust.
• Performance: With an extremely large number of entries (hundreds or thousands), performance might degrade slightly during wheel drawing or spinning, depending on your computer.
• Sound Issues: If sounds don't play, ensure they are enabled in Advanced Settings. Some browsers block auto-playing sounds until you interact with the page (e.g., click a button). Ensure sound files (`spin.mp3`, `win.mp3`, `whoosh.mp3`) are accessible to the HTML file.

---

Enjoy using Spin The Wheel - Random Picker / Wheel Decide!