Widget:WheelOfNursing: Difference between revisions

From Doc-Wiki
Jump to navigation Jump to search
← Older edit
Docmoates (talk | contribs)
HerzingU-SpecialAccess, Bots, Bureaucrats, Dr. Michael Moates, Interface administrators, Users who may use two-factor authentication, Push subscription managers, Suppressors, Administrators, Upload Wizard campaign editors
2,408 edits
VisualWikitext
No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 4: Line 4:
== Usage ==
== Usage ==
<pre>{{#widget:WheelOfNursing}}</pre>
<pre>{{#widget:WheelOfNursing}}</pre>
</noinclude><includeonly>
 
<div id="wheel-of-nursing-game">
== Parameters ==
     <meta charset="UTF-8">
This widget does not accept any parameters.
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Wheel of Nursing - Pharmacology Game</title>
[[Category:Widgets]]
     <style>
</noinclude><includeonly><html>
        * {
<style>
            margin: 0;
.wheel-of-nursing-game {
            padding: 0;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            box-sizing: border-box;
     background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
        }
     min-height: 600px;
       
    color: #fff;
        body {
    padding: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 10px;
            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    position: relative;
            min-height: 100vh;
}
            color: #fff;
 
        }
.wheel-of-nursing-game * {
       
    box-sizing: border-box;
        .game-container {
}
            max-width: 900px;
 
            margin: 0 auto;
.wheel-of-nursing-game .game-container {
            padding: 20px;
    max-width: 900px;
        }
    margin: 0 auto;
       
}
        /* Sound Controls */
 
        .sound-controls {
.wheel-of-nursing-game .sound-controls {
            position: fixed;
    position: absolute;
            top: 10px;
    top: 10px;
            right: 10px;
    right: 10px;
            background: rgba(0,0,0,0.8);
    background: rgba(0,0,0,0.8);
            padding: 15px;
    padding: 15px;
            border-radius: 10px;
    border-radius: 10px;
            z-index: 100;
    z-index: 100;
        }
}
       
 
        .sound-controls button {
.wheel-of-nursing-game .sound-controls button {
            padding: 8px 12px;
    padding: 8px 12px;
            margin: 2px;
    margin: 2px;
            font-size: 14px;
    font-size: 14px;
            border: none;
    border: none;
            border-radius: 5px;
    border-radius: 5px;
            cursor: pointer;
    cursor: pointer;
            color: #fff;
    color: #fff;
        }
}
       
 
        .sound-controls .on { background: #2ecc71; }
.wheel-of-nursing-game .sound-controls .on { background: #2ecc71; }
        .sound-controls .off { background: #e74c3c; }
.wheel-of-nursing-game .sound-controls .off { background: #e74c3c; }
       
 
        .volume-control {
.wheel-of-nursing-game .volume-control {
            margin-top: 10px;
    margin-top: 10px;
            color: #fff;
    color: #fff;
            font-size: 12px;
    font-size: 12px;
        }
}
       
 
        .volume-control input {
.wheel-of-nursing-game .volume-control input {
            width: 100px;
    width: 100px;
            margin-left: 5px;
    margin-left: 5px;
        }
}
       
 
        /* Header */
.wheel-of-nursing-game .header {
        .header {
    display: flex;
            display: flex;
    justify-content: space-between;
            justify-content: space-between;
    align-items: center;
            align-items: center;
    flex-wrap: wrap;
            flex-wrap: wrap;
    gap: 15px;
            gap: 15px;
    margin-bottom: 20px;
            margin-bottom: 20px;
}
        }
 
       
.wheel-of-nursing-game .header h1 {
        .header h1 {
    color: #ffd700;
            color: #ffd700;
    font-size: 32px;
            font-size: 32px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
            text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    margin: 0;
        }
    border: none;
       
}
        .scores {
 
            display: flex;
.wheel-of-nursing-game .scores {
            gap: 20px;
    display: flex;
        }
    gap: 20px;
       
}
        .score-box {
 
            padding: 10px 20px;
.wheel-of-nursing-game .score-box {
            border-radius: 10px;
    padding: 10px 20px;
            text-align: center;
    border-radius: 10px;
        }
    text-align: center;
       
}
        .score-box.round {
 
            background: rgba(255,215,0,0.2);
.wheel-of-nursing-game .score-box.round {
            border: 2px solid #ffd700;
    background: rgba(255,215,0,0.2);
        }
    border: 2px solid #ffd700;
       
}
        .score-box.total {
 
            background: rgba(46,204,113,0.2);
.wheel-of-nursing-game .score-box.total {
            border: 2px solid #2ecc71;
    background: rgba(46,204,113,0.2);
        }
    border: 2px solid #2ecc71;
       
}
        .score-box .label {
 
            font-size: 12px;
.wheel-of-nursing-game .score-box .label {
            color: #ffd700;
    font-size: 12px;
        }
    color: #ffd700;
       
}
        .score-box.total .label {
 
            color: #2ecc71;
.wheel-of-nursing-game .score-box.total .label {
        }
    color: #2ecc71;
       
}
        .score-box .value {
 
            font-size: 28px;
.wheel-of-nursing-game .score-box .value {
            font-weight: bold;
    font-size: 28px;
        }
    font-weight: bold;
       
}
        /* Message Box */
 
        .message-box {
.wheel-of-nursing-game .message-box {
            background: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.1);
            padding: 15px 20px;
    padding: 15px 20px;
            border-radius: 10px;
    border-radius: 10px;
            margin-bottom: 20px;
    margin-bottom: 20px;
            text-align: center;
    text-align: center;
            font-size: 18px;
    font-size: 18px;
        }
}
       
 
        .message-box .wheel-value {
.wheel-of-nursing-game .message-box .wheel-value {
            color: #ffd700;
    color: #ffd700;
            font-weight: bold;
    font-weight: bold;
            margin-left: 10px;
    margin-left: 10px;
        }
}
       
 
        /* Puzzle Board */
.wheel-of-nursing-game .puzzle-board {
        .puzzle-board {
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
            background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
    padding: 30px;
            padding: 30px;
    border-radius: 15px;
            border-radius: 15px;
    margin-bottom: 20px;
            margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
        }
 
       
.wheel-of-nursing-game .category {
        .category {
    color: #ffd700;
            color: #ffd700;
    font-size: 14px;
            font-size: 14px;
    text-transform: uppercase;
            text-transform: uppercase;
    letter-spacing: 3px;
            letter-spacing: 3px;
    margin-bottom: 15px;
            margin-bottom: 15px;
    text-align: center;
            text-align: center;
}
        }
 
       
.wheel-of-nursing-game .letter-tiles {
        .letter-tiles {
    display: flex;
            display: flex;
    flex-wrap: wrap;
            flex-wrap: wrap;
    justify-content: center;
            justify-content: center;
    gap: 8px;
            gap: 8px;
    margin-bottom: 20px;
            margin-bottom: 20px;
}
        }
 
       
.wheel-of-nursing-game .letter-tile {
        .letter-tile {
    width: 45px;
            width: 45px;
    height: 55px;
            height: 55px;
    border: 3px solid #ffd700;
            border: 3px solid #ffd700;
    border-radius: 5px;
            border-radius: 5px;
    display: flex;
            display: flex;
    align-items: center;
            align-items: center;
    justify-content: center;
            justify-content: center;
    font-size: 28px;
            font-size: 28px;
    font-weight: bold;
            font-weight: bold;
    color: #1a237e;
            color: #1a237e;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
        }
 
       
.wheel-of-nursing-game .letter-tile.revealed {
        .letter-tile.revealed {
    background: #fff;
            background: #fff;
}
        }
 
       
.wheel-of-nursing-game .letter-tile.hidden {
        .letter-tile.hidden {
    background: #1a237e;
            background: #1a237e;
}
        }
 
       
.wheel-of-nursing-game .letter-tile.space {
        .letter-tile.space {
    border: none;
            border: none;
    background: transparent;
            background: transparent;
    box-shadow: none;
            box-shadow: none;
}
        }
 
       
.wheel-of-nursing-game .clue-box {
        .clue-box {
    color: #fff;
            color: #fff;
    font-size: 16px;
            font-size: 16px;
    font-style: italic;
            font-style: italic;
    padding: 15px;
            padding: 15px;
    background: rgba(255,255,255,0.1);
            background: rgba(255,255,255,0.1);
    border-radius: 10px;
            border-radius: 10px;
    text-align: center;
            text-align: center;
}
        }
 
       
.wheel-of-nursing-game .wheel-container {
        /* Wheel */
    position: relative;
        .wheel-container {
    width: 300px;
            position: relative;
    height: 300px;
            width: 300px;
    margin: 0 auto 20px;
            height: 300px;
}
            margin: 0 auto 20px;
 
        }
.wheel-of-nursing-game .wheel-pointer {
       
    position: absolute;
        .wheel-pointer {
    top: -15px;
            position: absolute;
    left: 50%;
            top: -15px;
    transform: translateX(-50%);
            left: 50%;
    width: 0;
            transform: translateX(-50%);
    height: 0;
            width: 0;
    border-left: 15px solid transparent;
            height: 0;
    border-right: 15px solid transparent;
            border-left: 15px solid transparent;
    border-top: 30px solid #ffd700;
            border-right: 15px solid transparent;
    z-index: 10;
            border-top: 30px solid #ffd700;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
            z-index: 10;
}
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
 
        }
.wheel-of-nursing-game .wheel-svg {
       
    width: 100%;
        .wheel-svg {
    height: 100%;
            width: 100%;
    transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
            height: 100%;
}
            transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
 
        }
.wheel-of-nursing-game .letter-board {
       
    margin-bottom: 20px;
        /* Letter Board */
}
        .letter-board {
 
            margin-bottom: 20px;
.wheel-of-nursing-game .letter-section {
        }
    margin-bottom: 15px;
       
}
        .letter-section {
 
            margin-bottom: 15px;
.wheel-of-nursing-game .letter-section-label {
        }
    color: #ffd700;
       
    font-size: 12px;
        .letter-section-label {
    letter-spacing: 2px;
            color: #ffd700;
    margin-bottom: 8px;
            font-size: 12px;
    text-align: center;
            letter-spacing: 2px;
}
            margin-bottom: 8px;
 
            text-align: center;
.wheel-of-nursing-game .letter-buttons {
        }
    display: flex;
       
    flex-wrap: wrap;
        .letter-buttons {
    gap: 5px;
            display: flex;
    justify-content: center;
            flex-wrap: wrap;
}
            gap: 5px;
 
            justify-content: center;
.wheel-of-nursing-game .letter-btn {
        }
    width: 36px;
       
    height: 36px;
        .letter-btn {
    font-size: 16px;
            width: 36px;
    font-weight: bold;
            height: 36px;
    border: none;
            font-size: 16px;
    border-radius: 5px;
            font-weight: bold;
    cursor: pointer;
            border: none;
    color: #fff;
            border-radius: 5px;
    transition: all 0.2s;
            cursor: pointer;
}
            color: #fff;
 
            transition: all 0.2s;
.wheel-of-nursing-game .letter-btn.consonant { background: #2ecc71; }
        }
.wheel-of-nursing-game .letter-btn.consonant:disabled { background: #555; opacity: 0.5; cursor: not-allowed; }
       
.wheel-of-nursing-game .letter-btn.consonant.inactive { background: #888; cursor: not-allowed; }
        .letter-btn.consonant { background: #2ecc71; }
 
        .letter-btn.consonant:disabled { background: #555; opacity: 0.5; cursor: not-allowed; }
.wheel-of-nursing-game .letter-btn.vowel {
        .letter-btn.consonant.inactive { background: #888; cursor: not-allowed; }
    width: 45px;
       
    height: 45px;
        .letter-btn.vowel {
    font-size: 18px;
            width: 45px;
    background: #e74c3c;
            height: 45px;
}
            font-size: 18px;
.wheel-of-nursing-game .letter-btn.vowel:disabled { background: #555; opacity: 0.5; cursor: not-allowed; }
            background: #e74c3c;
.wheel-of-nursing-game .letter-btn.vowel.inactive { background: #888; cursor: not-allowed; }
        }
 
        .letter-btn.vowel:disabled { background: #555; opacity: 0.5; cursor: not-allowed; }
.wheel-of-nursing-game .action-buttons {
        .letter-btn.vowel.inactive { background: #888; cursor: not-allowed; }
    display: flex;
       
    gap: 10px;
        /* Action Buttons */
    justify-content: center;
        .action-buttons {
    flex-wrap: wrap;
            display: flex;
    margin-bottom: 20px;
            gap: 10px;
}
            justify-content: center;
 
            flex-wrap: wrap;
.wheel-of-nursing-game .action-btn {
            margin-bottom: 20px;
    padding: 15px 40px;
        }
    font-size: 18px;
       
    font-weight: bold;
        .action-btn {
    border: none;
            padding: 15px 40px;
    border-radius: 30px;
            font-size: 18px;
    cursor: pointer;
            font-weight: bold;
    transition: transform 0.2s;
            border: none;
}
            border-radius: 30px;
 
            cursor: pointer;
.wheel-of-nursing-game .action-btn:hover:not(:disabled) {
            transition: transform 0.2s;
    transform: scale(1.05);
        }
}
       
 
        .action-btn:hover:not(:disabled) {
.wheel-of-nursing-game .action-btn:disabled {
            transform: scale(1.05);
    opacity: 0.6;
        }
    cursor: not-allowed;
       
}
        .action-btn:disabled {
 
            opacity: 0.6;
.wheel-of-nursing-game .action-btn.spin {
            cursor: not-allowed;
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
        }
    color: #1a237e;
       
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
        .action-btn.spin {
}
            background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
 
            color: #1a237e;
.wheel-of-nursing-game .action-btn.solve {
            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
    background: #9b59b6;
        }
    color: #fff;
       
}
        .action-btn.solve {
 
            background: #9b59b6;
.wheel-of-nursing-game .action-btn.hint {
            color: #fff;
    background: #3498db;
        }
    color: #fff;
       
}
        .action-btn.hint {
 
            background: #3498db;
.wheel-of-nursing-game .hint-box {
            color: #fff;
    margin-top: 15px;
        }
    padding: 15px;
       
    background: rgba(52, 152, 219, 0.3);
        /* Hint Box */
    border-radius: 10px;
        .hint-box {
    text-align: center;
            margin-top: 15px;
    border: 2px solid #3498db;
            padding: 15px;
}
            background: rgba(52, 152, 219, 0.3);
 
            border-radius: 10px;
.wheel-of-nursing-game .solve-input-container {
            text-align: center;
    text-align: center;
            border: 2px solid #3498db;
    margin-bottom: 20px;
        }
}
       
 
        /* Solve Input */
.wheel-of-nursing-game .solve-input {
        .solve-input-container {
    padding: 15px 20px;
            text-align: center;
    font-size: 20px;
            margin-bottom: 20px;
    width: 100%;
        }
    max-width: 400px;
       
    border-radius: 10px;
        .solve-input {
    border: 3px solid #ffd700;
            padding: 15px 20px;
    margin-bottom: 10px;
            font-size: 20px;
}
            width: 100%;
 
            max-width: 400px;
.wheel-of-nursing-game .solve-buttons {
            border-radius: 10px;
    display: flex;
            border: 3px solid #ffd700;
    gap: 10px;
            margin-bottom: 10px;
    justify-content: center;
        }
}
       
 
        .solve-buttons {
.wheel-of-nursing-game .solve-btn {
            display: flex;
    padding: 12px 30px;
            gap: 10px;
    font-size: 16px;
            justify-content: center;
    font-weight: bold;
        }
    border: none;
       
    border-radius: 25px;
        .solve-btn {
    cursor: pointer;
            padding: 12px 30px;
    color: #fff;
            font-size: 16px;
}
            font-weight: bold;
 
            border: none;
.wheel-of-nursing-game .solve-btn.submit { background: #2ecc71; }
            border-radius: 25px;
.wheel-of-nursing-game .solve-btn.cancel { background: #e74c3c; }
            cursor: pointer;
 
            color: #fff;
.wheel-of-nursing-game .result-screen {
        }
    text-align: center;
       
    margin-top: 30px;
        .solve-btn.submit { background: #2ecc71; }
    padding: 30px;
        .solve-btn.cancel { background: #e74c3c; }
    border-radius: 15px;
       
}
        /* Result Screen */
 
        .result-screen {
.wheel-of-nursing-game .result-screen.won {
            text-align: center;
    background: rgba(46, 204, 113, 0.2);
            margin-top: 30px;
    border: 3px solid #2ecc71;
            padding: 30px;
}
            border-radius: 15px;
 
        }
.wheel-of-nursing-game .result-screen.lost {
       
    background: rgba(231, 76, 60, 0.2);
        .result-screen.won {
    border: 3px solid #e74c3c;
            background: rgba(46, 204, 113, 0.2);
}
            border: 3px solid #2ecc71;
 
        }
.wheel-of-nursing-game .result-screen h2 {
       
    font-size: 32px;
        .result-screen.lost {
    margin-bottom: 15px;
            background: rgba(231, 76, 60, 0.2);
    border: none;
            border: 3px solid #e74c3c;
}
        }
 
       
.wheel-of-nursing-game .result-screen.won h2 { color: #2ecc71; }
        .result-screen h2 {
.wheel-of-nursing-game .result-screen.lost h2 { color: #e74c3c; }
            font-size: 32px;
 
            margin-bottom: 15px;
.wheel-of-nursing-game .result-screen p {
        }
    font-size: 18px;
       
    margin-bottom: 20px;
        .result-screen.won h2 { color: #2ecc71; }
}
        .result-screen.lost h2 { color: #e74c3c; }
 
       
.wheel-of-nursing-game .result-screen .total-score {
        .result-screen p {
    color: #ffd700;
            font-size: 18px;
    font-weight: bold;
            margin-bottom: 20px;
}
        }
 
       
.wheel-of-nursing-game .result-buttons {
        .result-screen .total-score {
    display: flex;
            color: #ffd700;
    gap: 15px;
            font-weight: bold;
    justify-content: center;
        }
}
       
 
        .result-buttons {
.wheel-of-nursing-game .result-btn {
            display: flex;
    padding: 15px 40px;
            gap: 15px;
    font-size: 18px;
            justify-content: center;
    font-weight: bold;
        }
    border: none;
       
    border-radius: 30px;
        .result-btn {
    cursor: pointer;
            padding: 15px 40px;
}
            font-size: 18px;
 
            font-weight: bold;
.wheel-of-nursing-game .result-btn.next {
            border: none;
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
            border-radius: 30px;
    color: #1a237e;
            cursor: pointer;
}
        }
 
       
.wheel-of-nursing-game .result-btn.new-game {
        .result-btn.next {
    background: #e74c3c;
            background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #fff;
            color: #1a237e;
}
        }
 
       
.wheel-of-nursing-game .start-screen {
        .result-btn.new-game {
    display: flex;
            background: #e74c3c;
    flex-direction: column;
            color: #fff;
    align-items: center;
        }
    justify-content: center;
       
    min-height: 500px;
        /* Start Screen */
    text-align: center;
        .start-screen {
}
            display: flex;
 
            flex-direction: column;
.wheel-of-nursing-game .start-screen h1 {
            align-items: center;
    color: #ffd700;
            justify-content: center;
    font-size: 48px;
            min-height: 80vh;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
            text-align: center;
    margin-bottom: 20px;
        }
    border: none;
       
}
        .start-screen h1 {
 
            color: #ffd700;
.wheel-of-nursing-game .start-screen p {
            font-size: 48px;
    font-size: 18px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    max-width: 600px;
            margin-bottom: 20px;
    margin-bottom: 30px;
        }
    line-height: 1.6;
       
}
        .start-screen p {
 
            font-size: 18px;
.wheel-of-nursing-game .sound-notice {
            max-width: 600px;
    background: rgba(255,255,255,0.1);
            margin-bottom: 30px;
    padding: 20px;
            line-height: 1.6;
    border-radius: 10px;
        }
    margin-bottom: 30px;
       
}
        .sound-notice {
 
            background: rgba(255,255,255,0.1);
.wheel-of-nursing-game .sound-notice p:first-child {
            padding: 20px;
    color: #ffd700;
            border-radius: 10px;
    margin-bottom: 10px;
            margin-bottom: 30px;
}
        }
 
       
.wheel-of-nursing-game .sound-notice p:last-child {
        .sound-notice p:first-child {
    color: #aaa;
            color: #ffd700;
    font-size: 14px;
            margin-bottom: 10px;
    margin-bottom: 0;
        }
}
       
 
        .sound-notice p:last-child {
.wheel-of-nursing-game .start-btn {
            color: #aaa;
    padding: 20px 60px;
            font-size: 14px;
    font-size: 24px;
            margin-bottom: 0;
    font-weight: bold;
        }
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
       
    border: none;
        .start-btn {
    border-radius: 50px;
            padding: 20px 60px;
    cursor: pointer;
            font-size: 24px;
    color: #1a237e;
            font-weight: bold;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
            background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    transition: transform 0.2s;
            border: none;
}
            border-radius: 50px;
 
            cursor: pointer;
.wheel-of-nursing-game .start-btn:hover {
            color: #1a237e;
    transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
}
            transition: transform 0.2s;
 
        }
.wheel-of-nursing-game .hidden {
       
    display: none !important;
        .start-btn:hover {
}
            transform: scale(1.05);
</style>
        }
 
       
<div class="wheel-of-nursing-game">
        /* Hidden class */
        .hidden {
            display: none !important;
        }
    </style>
    <!-- Sound Controls -->
     <div class="sound-controls">
     <div class="sound-controls">
         <div>
         <div>
             <button id="musicToggle" class="on" onclick="toggleMusic()">🎵 Music ON</button>
             <button id="wonMusicToggle" class="on" onclick="WON.toggleMusic()">🎵 Music ON</button>
             <button id="sfxToggle" class="on" onclick="toggleSfx()">🔊 SFX ON</button>
             <button id="wonSfxToggle" class="on" onclick="WON.toggleSfx()">🔊 SFX ON</button>
         </div>
         </div>
         <div class="volume-control" id="musicVolumeControl">
         <div class="volume-control">
             <label>Music: <input type="range" id="musicVolume" min="0" max="30" value="15" onchange="setMusicVolume(this.value)"></label>
             <label>Music: <input type="range" id="wonMusicVolume" min="0" max="30" value="15" onchange="WON.setMusicVolume(this.value)"></label>
         </div>
         </div>
         <div class="volume-control" id="sfxVolumeControl">
         <div class="volume-control">
             <label>SFX: <input type="range" id="sfxVolume" min="0" max="50" value="30" onchange="setSfxVolume(this.value)"></label>
             <label>SFX: <input type="range" id="wonSfxVolume" min="0" max="50" value="30" onchange="WON.setSfxVolume(this.value)"></label>
         </div>
         </div>
     </div>
     </div>


     <div class="game-container">
     <div class="game-container">
        <!-- Start Screen -->
         <div id="wonStartScreen" class="start-screen">
         <div id="startScreen" class="start-screen">
             <h1>🎡 Wheel of Nursing! 🏥</h1>
             <h1>🎡 Wheel of Nursing! 🏥</h1>
             <p>Test your pharmacology and nursing knowledge! Spin the wheel, guess letters, and solve the puzzle. Based on HESI exam topics!</p>
             <p>Test your pharmacology and nursing knowledge! Spin the wheel, guess letters, and solve the puzzle. Based on HESI exam topics!</p>
Line 509: Line 502:
                 <p>Click Start to enable audio</p>
                 <p>Click Start to enable audio</p>
             </div>
             </div>
             <button class="start-btn" onclick="startGame()">🎮 Start Game!</button>
             <button class="start-btn" onclick="WON.startGame()">🎮 Start Game!</button>
         </div>
         </div>


        <!-- Game Screen -->
         <div id="wonGameScreen" class="hidden">
         <div id="gameScreen" class="hidden">
            <!-- Header -->
             <div class="header">
             <div class="header">
                 <h1>🎡 Wheel of Nursing!</h1>
                 <h1>🎡 Wheel of Nursing!</h1>
Line 520: Line 511:
                     <div class="score-box round">
                     <div class="score-box round">
                         <div class="label">ROUND</div>
                         <div class="label">ROUND</div>
                         <div class="value" id="roundScore">$0</div>
                         <div class="value" id="wonRoundScore">$0</div>
                     </div>
                     </div>
                     <div class="score-box total">
                     <div class="score-box total">
                         <div class="label">TOTAL</div>
                         <div class="label">TOTAL</div>
                         <div class="value" id="totalScore">$0</div>
                         <div class="value" id="wonTotalScore">$0</div>
                     </div>
                     </div>
                 </div>
                 </div>
             </div>
             </div>


            <!-- Message Box -->
             <div class="message-box">
             <div class="message-box">
                 <span id="message">Spin the wheel!</span>
                 <span id="wonMessage">Spin the wheel!</span>
                 <span id="wheelValue" class="wheel-value hidden"></span>
                 <span id="wonWheelValue" class="wheel-value hidden"></span>
             </div>
             </div>


            <!-- Puzzle Board -->
             <div class="puzzle-board">
             <div class="puzzle-board">
                 <div class="category" id="category">CATEGORY</div>
                 <div class="category" id="wonCategory">CATEGORY</div>
                 <div class="letter-tiles" id="letterTiles"></div>
                 <div class="letter-tiles" id="wonLetterTiles"></div>
                 <div class="clue-box">
                 <div class="clue-box">
                     <strong>Clue:</strong> <span id="clue">Loading...</span>
                     <strong>Clue:</strong> <span id="wonClue">Loading...</span>
                 </div>
                 </div>
             </div>
             </div>


            <!-- Wheel -->
             <div class="wheel-container" id="wonWheelContainer">
             <div class="wheel-container" id="wheelContainer">
                 <div class="wheel-pointer"></div>
                 <div class="wheel-pointer"></div>
                 <svg class="wheel-svg" id="wheel" viewBox="0 0 200 200"></svg>
                 <svg class="wheel-svg" id="wonWheel" viewBox="0 0 200 200"></svg>
             </div>
             </div>


            <!-- Letter Board -->
             <div class="letter-board" id="wonLetterBoard">
             <div class="letter-board" id="letterBoard">
                 <div class="letter-section">
                 <div class="letter-section">
                     <div class="letter-section-label">CONSONANTS</div>
                     <div class="letter-section-label">CONSONANTS</div>
                     <div class="letter-buttons" id="consonants"></div>
                     <div class="letter-buttons" id="wonConsonants"></div>
                 </div>
                 </div>
                 <div class="letter-section">
                 <div class="letter-section">
                     <div class="letter-section-label">VOWELS ($250 each)</div>
                     <div class="letter-section-label">VOWELS ($250 each)</div>
                     <div class="letter-buttons" id="vowels"></div>
                     <div class="letter-buttons" id="wonVowels"></div>
                 </div>
                 </div>
             </div>
             </div>


            <!-- Solve Input -->
             <div class="solve-input-container hidden" id="wonSolveContainer">
             <div class="solve-input-container hidden" id="solveContainer">
                 <input type="text" class="solve-input" id="wonSolveInput" placeholder="Type your answer...">
                 <input type="text" class="solve-input" id="solveInput" placeholder="Type your answer...">
                 <div class="solve-buttons">
                 <div class="solve-buttons">
                     <button class="solve-btn submit" onclick="submitSolve()">Submit</button>
                     <button class="solve-btn submit" onclick="WON.submitSolve()">Submit</button>
                     <button class="solve-btn cancel" onclick="cancelSolve()">Cancel</button>
                     <button class="solve-btn cancel" onclick="WON.cancelSolve()">Cancel</button>
                 </div>
                 </div>
             </div>
             </div>


            <!-- Action Buttons -->
             <div class="action-buttons" id="wonActionButtons">
             <div class="action-buttons" id="actionButtons">
                 <button class="action-btn spin" id="wonSpinBtn" onclick="WON.spinWheel()">🎡 Spin Wheel</button>
                 <button class="action-btn spin" id="spinBtn" onclick="spinWheel()">🎡 Spin Wheel</button>
                 <button class="action-btn solve" id="wonSolveBtn" onclick="WON.attemptSolve()">💡 Solve Puzzle</button>
                 <button class="action-btn solve" id="solveBtn" onclick="attemptSolve()">💡 Solve Puzzle</button>
                 <button class="action-btn hint" id="wonHintBtn" onclick="WON.useHint()">🔍 Hint (-$200)</button>
                 <button class="action-btn hint" id="hintBtn" onclick="useHint()">🔍 Hint (-$200)</button>
             </div>
             </div>


            <!-- Hint Box -->
             <div class="hint-box hidden" id="wonHintBox">
             <div class="hint-box hidden" id="hintBox">
                 <strong>💡 Hint:</strong> <span id="wonHintText"></span>
                 <strong>💡 Hint:</strong> <span id="hintText"></span>
             </div>
             </div>


            <!-- Result Screen -->
             <div class="result-screen hidden" id="wonResultScreen">
             <div class="result-screen hidden" id="resultScreen">
                 <h2 id="wonResultTitle">Congratulations!</h2>
                 <h2 id="resultTitle">Congratulations!</h2>
                 <p>Total Score: <span class="total-score" id="wonFinalScore">$0</span></p>
                 <p>Total Score: <span class="total-score" id="finalScore">$0</span></p>
                 <div class="result-buttons">
                 <div class="result-buttons">
                     <button class="result-btn next" onclick="nextPuzzle()">Next Puzzle →</button>
                     <button class="result-btn next" onclick="WON.nextPuzzle()">Next Puzzle →</button>
                     <button class="result-btn new-game" onclick="newGame()">New Game</button>
                     <button class="result-btn new-game" onclick="WON.newGame()">New Game</button>
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
     </div>
     </div>
</div>


    <script>
<script>
        // Questions
(function() {
        const QUESTIONS = [
    window.WON = window.WON || {};
            { category: "CARDIOVASCULAR", clue: "This class of medications ending in '-pril' treats hypertension by blocking angiotensin conversion", answer: "ACE INHIBITORS", hint: "Think lisinopril, enalapril" },
   
            { category: "ENDOCRINE", clue: "This hormone produced by beta cells of the pancreas lowers blood glucose levels", answer: "INSULIN", hint: "Diabetic patients may inject this" },
    var QUESTIONS = [
            { category: "RESPIRATORY", clue: "This bronchodilator class ending in '-terol' provides quick relief for asthma attacks", answer: "BETA AGONISTS", hint: "Albuterol is an example" },
        { category: "CARDIOVASCULAR", clue: "This class of medications ending in '-pril' treats hypertension by blocking angiotensin conversion", answer: "ACE INHIBITORS", hint: "Think lisinopril, enalapril" },
            { category: "PAIN MANAGEMENT", clue: "This opioid antagonist reverses respiratory depression from narcotic overdose", answer: "NALOXONE", hint: "Brand name Narcan" },
        { category: "ENDOCRINE", clue: "This hormone produced by beta cells of the pancreas lowers blood glucose levels", answer: "INSULIN", hint: "Diabetic patients may inject this" },
            { category: "RENAL", clue: "This class of diuretics acts on the loop of Henle and includes furosemide", answer: "LOOP DIURETICS", hint: "Lasix is a common one" },
        { category: "RESPIRATORY", clue: "This bronchodilator class ending in '-terol' provides quick relief for asthma attacks", answer: "BETA AGONISTS", hint: "Albuterol is an example" },
            { category: "PSYCHIATRIC", clue: "This class of antidepressants selectively inhibits serotonin reuptake", answer: "SSRI", hint: "Prozac and Zoloft belong here" },
        { category: "PAIN MANAGEMENT", clue: "This opioid antagonist reverses respiratory depression from narcotic overdose", answer: "NALOXONE", hint: "Brand name Narcan" },
            { category: "GI/HEPATIC", clue: "This class of medications ending in '-prazole' reduces stomach acid by blocking proton pumps", answer: "PPI", hint: "Omeprazole is an example" },
        { category: "RENAL", clue: "This class of diuretics acts on the loop of Henle and includes furosemide", answer: "LOOP DIURETICS", hint: "Lasix is a common one" },
            { category: "IMMUNE/HEMATOLOGY", clue: "This vitamin is essential for proper blood clotting and is reversed by warfarin", answer: "VITAMIN K", hint: "Given to newborns at birth" },
        { category: "PSYCHIATRIC", clue: "This class of antidepressants selectively inhibits serotonin reuptake", answer: "SSRI", hint: "Prozac and Zoloft belong here" },
            { category: "NEUROLOGICAL", clue: "This medication is the first-line treatment for status epilepticus", answer: "BENZODIAZEPINES", hint: "Lorazepam or diazepam" },
        { category: "GI/HEPATIC", clue: "This class of medications ending in '-prazole' reduces stomach acid by blocking proton pumps", answer: "PPI", hint: "Omeprazole is an example" },
            { category: "MUSCULOSKELETAL", clue: "This bisphosphonate medication treats osteoporosis by inhibiting bone resorption", answer: "ALENDRONATE", hint: "Brand name Fosamax" },
        { category: "IMMUNE/HEMATOLOGY", clue: "This vitamin is essential for proper blood clotting and is reversed by warfarin", answer: "VITAMIN K", hint: "Given to newborns at birth" },
            { category: "FUNDAMENTALS", clue: "These are the six rights of medication administration: right patient, drug, dose, route, time, and this", answer: "DOCUMENTATION", hint: "Record keeping" },
        { category: "NEUROLOGICAL", clue: "This medication is the first-line treatment for status epilepticus", answer: "BENZODIAZEPINES", hint: "Lorazepam or diazepam" },
            { category: "FLUID & ELECTROLYTE", clue: "This electrolyte imbalance causes peaked T waves on ECG and requires immediate treatment", answer: "HYPERKALEMIA", hint: "Too much potassium" },
        { category: "MUSCULOSKELETAL", clue: "This bisphosphonate medication treats osteoporosis by inhibiting bone resorption", answer: "ALENDRONATE", hint: "Brand name Fosamax" },
            { category: "INFECTION", clue: "This antibiotic class ending in '-cillin' works by inhibiting cell wall synthesis", answer: "PENICILLINS", hint: "Amoxicillin belongs here" },
        { category: "FUNDAMENTALS", clue: "These are the six rights of medication administration: right patient, drug, dose, route, time, and this", answer: "DOCUMENTATION", hint: "Record keeping" },
            { category: "SENSORY", clue: "These eye drops ending in '-olol' treat glaucoma by reducing aqueous humor production", answer: "BETA BLOCKERS", hint: "Timolol is commonly used" },
        { category: "FLUID AND ELECTROLYTE", clue: "This electrolyte imbalance causes peaked T waves on ECG and requires immediate treatment", answer: "HYPERKALEMIA", hint: "Too much potassium" },
            { category: "CARDIOVASCULAR", clue: "This cardiac glycoside from the foxglove plant increases cardiac contractility", answer: "DIGOXIN", hint: "Check apical pulse before giving" },
        { category: "INFECTION", clue: "This antibiotic class ending in '-cillin' works by inhibiting cell wall synthesis", answer: "PENICILLINS", hint: "Amoxicillin belongs here" },
            { category: "PATHOPHYSIOLOGY", clue: "This condition occurs when the heart cannot pump enough blood to meet the body's needs", answer: "HEART FAILURE", hint: "Can be left or right sided" },
        { category: "SENSORY", clue: "These eye drops ending in '-olol' treat glaucoma by reducing aqueous humor production", answer: "BETA BLOCKERS", hint: "Timolol is commonly used" },
            { category: "MED ADMINISTRATION", clue: "This injection angle is used for subcutaneous medications like insulin", answer: "FORTY FIVE DEGREES", hint: "Between 45 and 90 degrees" },
        { category: "CARDIOVASCULAR", clue: "This cardiac glycoside from the foxglove plant increases cardiac contractility", answer: "DIGOXIN", hint: "Check apical pulse before giving" },
            { category: "TEACHING", clue: "This teaching method uses return demonstration to verify patient understanding", answer: "TEACH BACK", hint: "Show me how you would..." }
        { category: "PATHOPHYSIOLOGY", clue: "This condition occurs when the heart cannot pump enough blood to meet the body's needs", answer: "HEART FAILURE", hint: "Can be left or right sided" },
        ];
        { category: "MED ADMINISTRATION", clue: "This injection angle is used for subcutaneous medications like insulin", answer: "FORTY FIVE DEGREES", hint: "Between 45 and 90 degrees" },
        { category: "TEACHING", clue: "This teaching method uses return demonstration to verify patient understanding", answer: "TEACH BACK", hint: "Show me how you would..." }
    ];


        const WHEEL_SEGMENTS = [
    var WHEEL_SEGMENTS = [
            { value: 100, color: '#e74c3c' },
        { value: 100, color: '#e74c3c' }, { value: 200, color: '#3498db' },
            { value: 200, color: '#3498db' },
        { value: 300, color: '#2ecc71' }, { value: 400, color: '#f39c12' },
            { value: 300, color: '#2ecc71' },
        { value: 500, color: '#9b59b6' }, { value: 600, color: '#1abc9c' },
            { value: 400, color: '#f39c12' },
        { value: 700, color: '#e67e22' }, { value: 800, color: '#34495e' },
            { value: 500, color: '#9b59b6' },
        { value: 'BANKRUPT', color: '#000000' }, { value: 900, color: '#16a085' },
            { value: 600, color: '#1abc9c' },
        { value: 1000, color: '#c0392b' }, { value: 'LOSE TURN', color: '#7f8c8d' }
            { value: 700, color: '#e67e22' },
    ];
            { value: 800, color: '#34495e' },
            { value: 'BANKRUPT', color: '#000000' },
            { value: 900, color: '#16a085' },
            { value: 1000, color: '#c0392b' },
            { value: 'LOSE TURN', color: '#7f8c8d' },
        ];


        const CONSONANTS = 'BCDFGHJKLMNPQRSTVWXYZ'.split('');
    var CONSONANTS = 'BCDFGHJKLMNPQRSTVWXYZ'.split('');
        const VOWELS = ['A', 'E', 'I', 'O', 'U'];
    var VOWELS = ['A', 'E', 'I', 'O', 'U'];


        // Game State
    var currentQuestion = null;
        let currentQuestion = null;
    var revealedLetters = new Set();
        let revealedLetters = new Set();
    var totalScore = 0;
        let totalScore = 0;
    var roundScore = 0;
        let roundScore = 0;
    var wheelRotation = 0;
        let wheelRotation = 0;
    var currentWheelValue = null;
        let currentWheelValue = null;
    var gamePhase = 'start';
        let gamePhase = 'start';
    var spinning = false;
        let spinning = false;
    var usedQuestions = [];
        let usedQuestions = [];
    var hintUsed = false;
        let hintUsed = false;


        // Audio
    var audioContext = null;
        let audioContext = null;
    var musicGain = null;
        let musicGain = null;
    var sfxGain = null;
        let sfxGain = null;
    var musicEnabled = true;
        let musicEnabled = true;
    var sfxEnabled = true;
        let sfxEnabled = true;
    var musicPlaying = false;
        let musicPlaying = false;


        function initAudio() {
    function initAudio() {
            if (!audioContext) {
        if (!audioContext) {
                audioContext = new (window.AudioContext || window.webkitAudioContext)();
            audioContext = new (window.AudioContext || window.webkitAudioContext)();
                musicGain = audioContext.createGain();
            musicGain = audioContext.createGain();
                musicGain.gain.value = 0.15;
            musicGain.gain.value = 0.15;
                musicGain.connect(audioContext.destination);
            musicGain.connect(audioContext.destination);
               
            sfxGain = audioContext.createGain();
                sfxGain = audioContext.createGain();
            sfxGain.gain.value = 0.3;
                sfxGain.gain.value = 0.3;
            sfxGain.connect(audioContext.destination);
                sfxGain.connect(audioContext.destination);
            }
            if (audioContext.state === 'suspended') {
                audioContext.resume();
            }
         }
         }
        if (audioContext.state === 'suspended') audioContext.resume();
    }


        function playNote(frequency, duration, type = 'sine', gain = sfxGain) {
    function playNote(frequency, duration, type, gain) {
            if (!audioContext || !sfxEnabled) return;
        if (!audioContext || !sfxEnabled) return;
            const osc = audioContext.createOscillator();
        gain = gain || sfxGain;
            const noteGain = audioContext.createGain();
        var osc = audioContext.createOscillator();
            osc.type = type;
        var noteGain = audioContext.createGain();
            osc.frequency.setValueAtTime(frequency, audioContext.currentTime);
        osc.type = type || 'sine';
            noteGain.gain.setValueAtTime(0.3, audioContext.currentTime);
        osc.frequency.setValueAtTime(frequency, audioContext.currentTime);
            noteGain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
        noteGain.gain.setValueAtTime(0.3, audioContext.currentTime);
            osc.connect(noteGain);
        noteGain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
            noteGain.connect(gain);
        osc.connect(noteGain);
            osc.start();
        noteGain.connect(gain);
            osc.stop(audioContext.currentTime + duration);
        osc.start();
        }
        osc.stop(audioContext.currentTime + duration);
    }


        function playClick() {
    function playClick() {
            if (!audioContext || !sfxEnabled) return;
        if (!audioContext || !sfxEnabled) return;
            const osc = audioContext.createOscillator();
        var osc = audioContext.createOscillator();
            const clickGain = audioContext.createGain();
        var clickGain = audioContext.createGain();
            osc.type = 'square';
        osc.type = 'square';
            osc.frequency.setValueAtTime(800 + Math.random() * 400, audioContext.currentTime);
        osc.frequency.setValueAtTime(800 + Math.random() * 400, audioContext.currentTime);
            clickGain.gain.setValueAtTime(0.2, audioContext.currentTime);
        clickGain.gain.setValueAtTime(0.2, audioContext.currentTime);
            clickGain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.05);
        clickGain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.05);
            osc.connect(clickGain);
        osc.connect(clickGain);
            clickGain.connect(sfxGain);
        clickGain.connect(sfxGain);
            osc.start();
        osc.start();
            osc.stop(audioContext.currentTime + 0.05);
        osc.stop(audioContext.currentTime + 0.05);
        }
    }


        function playWheelSpin(duration = 3000) {
    function playWheelSpin(duration) {
            if (!audioContext || !sfxEnabled) return;
        if (!audioContext || !sfxEnabled) return;
            const clicks = 60;
        var time = 0;
            const baseInterval = 30;
        for (var i = 0; i < 60; i++) {
            let time = 0;
            var interval = 30 * Math.pow(1 + (i/60) * 3, 2);
            for (let i = 0; i < clicks; i++) {
            if (time < duration) setTimeout(playClick, time);
                const interval = baseInterval * Math.pow(1 + (i/clicks) * 3, 2);
            time += interval;
                if (time < duration) {
                    setTimeout(() => playClick(), time);
                }
                time += interval;
            }
         }
         }
    }


        function playCorrect() {
    function playCorrect() {
            if (!sfxEnabled) return;
        if (!sfxEnabled) return;
            [523.25, 659.25, 783.99].forEach((freq, i) => {
        [523.25, 659.25, 783.99].forEach(function(f, i) { setTimeout(function() { playNote(f, 0.2, 'sine'); }, i * 100); });
                setTimeout(() => playNote(freq, 0.2, 'sine'), i * 100);
    }
            });
        }


        function playWrong() {
    function playWrong() {
            if (!audioContext || !sfxEnabled) return;
        if (!audioContext || !sfxEnabled) return;
            const osc = audioContext.createOscillator();
        var osc = audioContext.createOscillator();
            const wrongGain = audioContext.createGain();
        var g = audioContext.createGain();
            osc.type = 'sawtooth';
        osc.type = 'sawtooth';
            osc.frequency.setValueAtTime(150, audioContext.currentTime);
        osc.frequency.setValueAtTime(150, audioContext.currentTime);
            wrongGain.gain.setValueAtTime(0.2, audioContext.currentTime);
        g.gain.setValueAtTime(0.2, audioContext.currentTime);
            wrongGain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
        g.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
            osc.connect(wrongGain);
        osc.connect(g);
            wrongGain.connect(sfxGain);
        g.connect(sfxGain);
            osc.start();
        osc.start();
            osc.stop(audioContext.currentTime + 0.3);
        osc.stop(audioContext.currentTime + 0.3);
        }
    }


        function playBankrupt() {
    function playBankrupt() {
            if (!sfxEnabled) return;
        if (!sfxEnabled) return;
            [400, 350, 300, 250, 200, 150].forEach((freq, i) => {
        [400, 350, 300, 250, 200, 150].forEach(function(f, i) { setTimeout(function() { playNote(f, 0.15, 'sawtooth'); }, i * 80); });
                setTimeout(() => playNote(freq, 0.15, 'sawtooth'), i * 80);
    }
            });
        }


        function playWin() {
    function playWin() {
            if (!sfxEnabled) return;
        if (!sfxEnabled) return;
            const melody = [
        var m = [{f:523.25,d:0.15},{f:523.25,d:0.15},{f:523.25,d:0.15},{f:523.25,d:0.4},{f:415.30,d:0.4},{f:466.16,d:0.4},{f:523.25,d:0.3},{f:466.16,d:0.15},{f:523.25,d:0.6}];
                { freq: 523.25, dur: 0.15 }, { freq: 523.25, dur: 0.15 }, { freq: 523.25, dur: 0.15 },
        var t = 0;
                { freq: 523.25, dur: 0.4 }, { freq: 415.30, dur: 0.4 }, { freq: 466.16, dur: 0.4 },
        m.forEach(function(n) { setTimeout(function() { playNote(n.f, n.d, 'square'); }, t); t += n.d * 500; });
                { freq: 523.25, dur: 0.3 }, { freq: 466.16, dur: 0.15 }, { freq: 523.25, dur: 0.6 },
    }
            ];
            let time = 0;
            melody.forEach(note => {
                setTimeout(() => playNote(note.freq, note.dur, 'square'), time);
                time += note.dur * 500;
            });
        }


        function playLose() {
    function playLose() {
            if (!sfxEnabled) return;
        if (!sfxEnabled) return;
            [392, 369.99, 349.23, 329.63, 293.66].forEach((freq, i) => {
        [392, 369.99, 349.23, 329.63, 293.66].forEach(function(f, i) { setTimeout(function() { playNote(f, 0.3, 'sine'); }, i * 200); });
                setTimeout(() => playNote(freq, 0.3, 'sine'), i * 200);
    }
            });
        }


        function playMusicNote(frequency, duration, type) {
    function playMusicNote(frequency, duration, type) {
            if (!audioContext || !musicPlaying) return;
        if (!audioContext || !musicPlaying) return;
            const osc = audioContext.createOscillator();
        var osc = audioContext.createOscillator();
            const noteGain = audioContext.createGain();
        var g = audioContext.createGain();
            osc.type = type;
        osc.type = type;
            osc.frequency.setValueAtTime(frequency, audioContext.currentTime);
        osc.frequency.setValueAtTime(frequency, audioContext.currentTime);
            noteGain.gain.setValueAtTime(0.1, audioContext.currentTime);
        g.gain.setValueAtTime(0.1, audioContext.currentTime);
            noteGain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
        g.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
            osc.connect(noteGain);
        osc.connect(g);
            noteGain.connect(musicGain);
        g.connect(musicGain);
            osc.start();
        osc.start();
            osc.stop(audioContext.currentTime + duration);
        osc.stop(audioContext.currentTime + duration);
        }
    }


        function playMusicLoop() {
    function playMusicLoop() {
            if (!musicPlaying || !audioContext) return;
        if (!musicPlaying || !audioContext) return;
            const bassLine = [
        var bass = [{f:130.81,d:0.5},{f:146.83,d:0.5},{f:164.81,d:0.5},{f:174.61,d:0.5},{f:196.00,d:0.5},{f:174.61,d:0.5},{f:164.81,d:0.5},{f:146.83,d:0.5}];
                { freq: 130.81, dur: 0.5 }, { freq: 146.83, dur: 0.5 }, { freq: 164.81, dur: 0.5 }, { freq: 174.61, dur: 0.5 },
        var mel = [{f:523.25,d:0.25},{f:587.33,d:0.25},{f:659.25,d:0.5},{f:698.46,d:0.25},{f:783.99,d:0.75},{f:659.25,d:0.5},{f:523.25,d:0.5},{f:587.33,d:0.5}];
                { freq: 196.00, dur: 0.5 }, { freq: 174.61, dur: 0.5 }, { freq: 164.81, dur: 0.5 }, { freq: 146.83, dur: 0.5 },
        var t = 0;
            ];
        bass.forEach(function(n) { setTimeout(function() { if(musicPlaying) playMusicNote(n.f, n.d*0.9, 'triangle'); }, t); t += n.d*500; });
            const melody = [
        var mt = 250;
                { freq: 523.25, dur: 0.25 }, { freq: 587.33, dur: 0.25 }, { freq: 659.25, dur: 0.5 },
        mel.forEach(function(n) { setTimeout(function() { if(musicPlaying) playMusicNote(n.f, n.d*0.8, 'sine'); }, mt); mt += n.d*500; });
                { freq: 698.46, dur: 0.25 }, { freq: 783.99, dur: 0.75 }, { freq: 659.25, dur: 0.5 },
        setTimeout(function() { if(musicPlaying) playMusicLoop(); }, 4000);
                { freq: 523.25, dur: 0.5 }, { freq: 587.33, dur: 0.5 },
    }
            ];
            let time = 0;
            bassLine.forEach(note => {
                setTimeout(() => { if (musicPlaying) playMusicNote(note.freq, note.dur * 0.9, 'triangle'); }, time);
                time += note.dur * 500;
            });
            let melodyTime = 250;
            melody.forEach(note => {
                setTimeout(() => { if (musicPlaying) playMusicNote(note.freq, note.dur * 0.8, 'sine'); }, melodyTime);
                melodyTime += note.dur * 500;
            });
            setTimeout(() => { if (musicPlaying) playMusicLoop(); }, 4000);
        }


        function startMusic() {
    function startMusic() {
            if (!audioContext || musicPlaying || !musicEnabled) return;
        if (!audioContext || musicPlaying || !musicEnabled) return;
            musicPlaying = true;
        musicPlaying = true;
            playMusicLoop();
        playMusicLoop();
        }
    }


        function stopMusic() {
    function stopMusic() { musicPlaying = false; }
            musicPlaying = false;
        }


        function toggleMusic() {
    WON.toggleMusic = function() {
            initAudio();
        initAudio();
            musicEnabled = !musicEnabled;
        musicEnabled = !musicEnabled;
            const btn = document.getElementById('musicToggle');
        var btn = document.getElementById('wonMusicToggle');
            if (musicEnabled) {
        if (musicEnabled) { btn.textContent = '🎵 Music ON'; btn.className = 'on'; startMusic(); }
                btn.textContent = '🎵 Music ON';
        else { btn.textContent = '🔇 Music OFF'; btn.className = 'off'; stopMusic(); }
                btn.className = 'on';
    };
                startMusic();
            } else {
                btn.textContent = '🔇 Music OFF';
                btn.className = 'off';
                stopMusic();
            }
        }


        function toggleSfx() {
    WON.toggleSfx = function() {
            initAudio();
        initAudio();
            sfxEnabled = !sfxEnabled;
        sfxEnabled = !sfxEnabled;
            const btn = document.getElementById('sfxToggle');
        var btn = document.getElementById('wonSfxToggle');
            if (sfxEnabled) {
        btn.textContent = sfxEnabled ? '🔊 SFX ON' : '🔇 SFX OFF';
                btn.textContent = '🔊 SFX ON';
        btn.className = sfxEnabled ? 'on' : 'off';
                btn.className = 'on';
    };
            } else {
                btn.textContent = '🔇 SFX OFF';
                btn.className = 'off';
            }
        }


        function setMusicVolume(value) {
    WON.setMusicVolume = function(v) { if (musicGain) musicGain.gain.value = v / 100; };
            if (musicGain) musicGain.gain.value = value / 100;
    WON.setSfxVolume = function(v) { if (sfxGain) sfxGain.gain.value = v / 100; };
        }


         function setSfxVolume(value) {
    function drawWheel() {
             if (sfxGain) sfxGain.gain.value = value / 100;
        var svg = document.getElementById('wonWheel');
         }
         svg.innerHTML = '';
        var segAngle = 360 / WHEEL_SEGMENTS.length;
        WHEEL_SEGMENTS.forEach(function(seg, i) {
            var sa = i * segAngle, ea = (i+1) * segAngle;
            var sr = (sa-90)*Math.PI/180, er = (ea-90)*Math.PI/180;
            var x1 = 100+90*Math.cos(sr), y1 = 100+90*Math.sin(sr);
            var x2 = 100+90*Math.cos(er), y2 = 100+90*Math.sin(er);
            var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            path.setAttribute('d', 'M 100 100 L ' + x1 + ' ' + y1 + ' A 90 90 0 0 1 ' + x2 + ' ' + y2 + ' Z');
            path.setAttribute('fill', seg.color);
            path.setAttribute('stroke', '#fff');
            path.setAttribute('stroke-width', '2');
            svg.appendChild(path);
            var ma = ((sa+ea)/2-90)*Math.PI/180;
            var tx = 100+60*Math.cos(ma), ty = 100+60*Math.sin(ma);
            var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            text.setAttribute('x', tx);
            text.setAttribute('y', ty);
            text.setAttribute('fill', '#fff');
            text.setAttribute('font-size', typeof seg.value === 'number' ? '10' : '6');
            text.setAttribute('font-weight', 'bold');
            text.setAttribute('text-anchor', 'middle');
            text.setAttribute('dominant-baseline', 'middle');
             text.setAttribute('transform', 'rotate(' + ((sa+ea)/2) + ', ' + tx + ', ' + ty + ')');
            text.textContent = typeof seg.value === 'number' ? ('$' + seg.value) : seg.value;
            svg.appendChild(text);
        });
        var c = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        c.setAttribute('cx', '100'); c.setAttribute('cy', '100'); c.setAttribute('r', '20');
        c.setAttribute('fill', '#ffd700'); c.setAttribute('stroke', '#fff'); c.setAttribute('stroke-width', '3');
         svg.appendChild(c);
    }


        // Draw Wheel
    function renderPuzzle() {
        function drawWheel() {
        var cont = document.getElementById('wonLetterTiles');
            const svg = document.getElementById('wheel');
        cont.innerHTML = '';
            svg.innerHTML = '';
        currentQuestion.answer.toUpperCase().split('').forEach(function(ch) {
            const segmentAngle = 360 / WHEEL_SEGMENTS.length;
            var tile = document.createElement('div');
           
            tile.className = 'letter-tile';
            WHEEL_SEGMENTS.forEach((segment, i) => {
            if (ch === ' ') tile.classList.add('space');
                const startAngle = i * segmentAngle;
            else if (revealedLetters.has(ch) || !/[A-Z]/.test(ch)) { tile.classList.add('revealed'); tile.textContent = ch; }
                const endAngle = (i + 1) * segmentAngle;
             else tile.classList.add('hidden');
                const startRad = (startAngle - 90) * Math.PI / 180;
             cont.appendChild(tile);
                const endRad = (endAngle - 90) * Math.PI / 180;
        });
                const x1 = 100 + 90 * Math.cos(startRad);
        document.getElementById('wonCategory').textContent = currentQuestion.category;
                const y1 = 100 + 90 * Math.sin(startRad);
        document.getElementById('wonClue').textContent = currentQuestion.clue;
                const x2 = 100 + 90 * Math.cos(endRad);
    }
                const y2 = 100 + 90 * Math.sin(endRad);
               
                const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                path.setAttribute('d', `M 100 100 L ${x1} ${y1} A 90 90 0 0 1 ${x2} ${y2} Z`);
                path.setAttribute('fill', segment.color);
                path.setAttribute('stroke', '#fff');
                path.setAttribute('stroke-width', '2');
                svg.appendChild(path);
               
                const midAngle = ((startAngle + endAngle) / 2 - 90) * Math.PI / 180;
                const textX = 100 + 60 * Math.cos(midAngle);
                const textY = 100 + 60 * Math.sin(midAngle);
               
                const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                text.setAttribute('x', textX);
                text.setAttribute('y', textY);
                text.setAttribute('fill', '#fff');
                text.setAttribute('font-size', typeof segment.value === 'number' ? '10' : '6');
                text.setAttribute('font-weight', 'bold');
                text.setAttribute('text-anchor', 'middle');
                text.setAttribute('dominant-baseline', 'middle');
                text.setAttribute('transform', `rotate(${(startAngle + endAngle) / 2}, ${textX}, ${textY})`);
                text.textContent = typeof segment.value === 'number' ? `$${segment.value}` : segment.value;
                svg.appendChild(text);
            });
              
            const center = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
             center.setAttribute('cx', '100');
            center.setAttribute('cy', '100');
            center.setAttribute('r', '20');
            center.setAttribute('fill', '#ffd700');
            center.setAttribute('stroke', '#fff');
            center.setAttribute('stroke-width', '3');
            svg.appendChild(center);
        }


        // Render Puzzle Board
    function renderLetterButtons() {
        function renderPuzzle() {
        var cc = document.getElementById('wonConsonants'), vc = document.getElementById('wonVowels');
            const container = document.getElementById('letterTiles');
        cc.innerHTML = ''; vc.innerHTML = '';
            container.innerHTML = '';
        CONSONANTS.forEach(function(l) {
            const answer = currentQuestion.answer.toUpperCase();
            var btn = document.createElement('button');
           
            btn.className = 'letter-btn consonant';
            answer.split('').forEach(char => {
            btn.textContent = l;
                const tile = document.createElement('div');
            btn.disabled = revealedLetters.has(l);
                tile.className = 'letter-tile';
            if (gamePhase !== 'guess') btn.classList.add('inactive');
               
            btn.onclick = function() { guessLetter(l); };
                if (char === ' ') {
            cc.appendChild(btn);
                    tile.classList.add('space');
        });
                } else if (revealedLetters.has(char) || !/[A-Z]/.test(char)) {
        VOWELS.forEach(function(v) {
                    tile.classList.add('revealed');
            var btn = document.createElement('button');
                    tile.textContent = char;
            btn.className = 'letter-btn vowel';
                } else {
            btn.textContent = v;
                    tile.classList.add('hidden');
            btn.disabled = revealedLetters.has(v) || roundScore < 250;
                }
            if (gamePhase !== 'spin') btn.classList.add('inactive');
                container.appendChild(tile);
            btn.onclick = function() { buyVowel(v); };
            });
             vc.appendChild(btn);
              
        });
            document.getElementById('category').textContent = currentQuestion.category;
    }
            document.getElementById('clue').textContent = currentQuestion.clue;
        }


        // Render Letter Buttons
    function updateUI() {
        function renderLetterButtons() {
        document.getElementById('wonRoundScore').textContent = '$' + roundScore;
            const consonantsContainer = document.getElementById('consonants');
        document.getElementById('wonTotalScore').textContent = '$' + totalScore;
            const vowelsContainer = document.getElementById('vowels');
        var spinBtn = document.getElementById('wonSpinBtn');
            consonantsContainer.innerHTML = '';
        spinBtn.disabled = spinning || gamePhase !== 'spin';
            vowelsContainer.innerHTML = '';
        spinBtn.textContent = spinning ? '🎡 Spinning...' : '🎡 Spin Wheel';
           
        document.getElementById('wonSolveBtn').disabled = gamePhase !== 'spin';
            CONSONANTS.forEach(letter => {
        renderLetterButtons();
                const btn = document.createElement('button');
    }
                btn.className = 'letter-btn consonant';
                btn.textContent = letter;
                btn.disabled = revealedLetters.has(letter);
                if (gamePhase !== 'guess') btn.classList.add('inactive');
                btn.onclick = () => guessLetter(letter);
                consonantsContainer.appendChild(btn);
            });
           
            VOWELS.forEach(vowel => {
                const btn = document.createElement('button');
                btn.className = 'letter-btn vowel';
                btn.textContent = vowel;
                btn.disabled = revealedLetters.has(vowel) || roundScore < 250;
                if (gamePhase !== 'spin') btn.classList.add('inactive');
                btn.onclick = () => buyVowel(vowel);
                vowelsContainer.appendChild(btn);
            });
        }


        // Update UI
    function setMessage(msg, wv) {
        function updateUI() {
        document.getElementById('wonMessage').textContent = msg;
            document.getElementById('roundScore').textContent = `$${roundScore}`;
        var wve = document.getElementById('wonWheelValue');
            document.getElementById('totalScore').textContent = `$${totalScore}`;
        if (wv !== null && wv !== undefined) { wve.textContent = 'Current: $' + wv; wve.classList.remove('hidden'); }
           
        else wve.classList.add('hidden');
            const spinBtn = document.getElementById('spinBtn');
    }
            const solveBtn = document.getElementById('solveBtn');
           
            spinBtn.disabled = spinning || gamePhase !== 'spin';
            spinBtn.textContent = spinning ? '🎡 Spinning...' : '🎡 Spin Wheel';
            solveBtn.disabled = gamePhase !== 'spin';
           
            renderLetterButtons();
        }


         // Set Message
    WON.startGame = function() {
         function setMessage(msg, wheelVal = null) {
         initAudio();
            document.getElementById('message').textContent = msg;
         if (musicEnabled) startMusic();
            const wheelValueEl = document.getElementById('wheelValue');
        document.getElementById('wonStartScreen').classList.add('hidden');
            if (wheelVal !== null) {
        document.getElementById('wonGameScreen').classList.remove('hidden');
                wheelValueEl.textContent = `Current: $${wheelVal}`;
        drawWheel();
                wheelValueEl.classList.remove('hidden');
        startNewRound();
            } else {
    };
                wheelValueEl.classList.add('hidden');
            }
        }


        // Start Game
    function startNewRound() {
         function startGame() {
         var avail = QUESTIONS.filter(function(_, i) { return usedQuestions.indexOf(i) === -1; });
            initAudio();
        if (avail.length === 0) { usedQuestions = []; avail = QUESTIONS; }
            if (musicEnabled) startMusic();
        var idx = QUESTIONS.indexOf(avail[Math.floor(Math.random() * avail.length)]);
            document.getElementById('startScreen').classList.add('hidden');
        usedQuestions.push(idx);
            document.getElementById('gameScreen').classList.remove('hidden');
        currentQuestion = QUESTIONS[idx];
            drawWheel();
        revealedLetters = new Set();
            startNewRound();
        roundScore = 0;
         }
        currentWheelValue = null;
        gamePhase = 'spin';
        hintUsed = false;
        document.getElementById('wonHintBox').classList.add('hidden');
        document.getElementById('wonHintBtn').disabled = false;
        document.getElementById('wonResultScreen').classList.add('hidden');
        document.getElementById('wonWheelContainer').classList.remove('hidden');
        document.getElementById('wonLetterBoard').classList.remove('hidden');
        document.getElementById('wonActionButtons').classList.remove('hidden');
        document.getElementById('wonSolveContainer').classList.add('hidden');
        renderPuzzle();
        updateUI();
         setMessage('Spin the wheel!');
    }


        // Start New Round
    WON.spinWheel = function() {
        function startNewRound() {
        if (spinning || gamePhase !== 'spin') return;
            const available = QUESTIONS.filter((_, i) => !usedQuestions.includes(i));
        initAudio();
            if (available.length === 0) usedQuestions = [];
        spinning = true;
           
        setMessage('Spinning...');
            const availableNow = QUESTIONS.filter((_, i) => !usedQuestions.includes(i));
        updateUI();
            const index = QUESTIONS.indexOf(availableNow[Math.floor(Math.random() * availableNow.length)]);
        playWheelSpin(3000);
            usedQuestions.push(index);
        var spins = 3 + Math.random() * 3;
            currentQuestion = QUESTIONS[index];
        var segAngle = 360 / WHEEL_SEGMENTS.length;
           
        var randSeg = Math.floor(Math.random() * WHEEL_SEGMENTS.length);
            revealedLetters = new Set();
        wheelRotation += (spins * 360) + (randSeg * segAngle);
             roundScore = 0;
        document.getElementById('wonWheel').style.transform = 'rotate(' + wheelRotation + 'deg)';
             currentWheelValue = null;
        setTimeout(function() {
             gamePhase = 'spin';
             var seg = WHEEL_SEGMENTS[randSeg];
            hintUsed = false;
             currentWheelValue = seg.value;
              
             spinning = false;
            document.getElementById('hintBox').classList.add('hidden');
             if (seg.value === 'BANKRUPT') { roundScore = 0; setMessage('BANKRUPT! You lost your round earnings. Spin again!'); gamePhase = 'spin'; playBankrupt(); }
            document.getElementById('hintBtn').disabled = false;
             else if (seg.value === 'LOSE TURN') { setMessage('Lost your turn! Spin again.'); gamePhase = 'spin'; playWrong(); }
            document.getElementById('resultScreen').classList.add('hidden');
             else { setMessage('$' + seg.value + '! Pick a consonant.', seg.value); gamePhase = 'guess'; playNote(880, 0.1, 'sine'); }
             document.getElementById('wheelContainer').classList.remove('hidden');
            document.getElementById('letterBoard').classList.remove('hidden');
             document.getElementById('actionButtons').classList.remove('hidden');
            document.getElementById('solveContainer').classList.add('hidden');
           
            renderPuzzle();
             updateUI();
             updateUI();
            setMessage('Spin the wheel!');
        }, 3000);
        }
    };


        // Spin Wheel
    function guessLetter(letter) {
        function spinWheel() {
        if (gamePhase !== 'guess' || revealedLetters.has(letter)) return;
            if (spinning || gamePhase !== 'spin') return;
        var ans = currentQuestion.answer.toUpperCase();
           
        var cnt = (ans.match(new RegExp(letter, 'g')) || []).length;
            initAudio();
        revealedLetters.add(letter);
            spinning = true;
        if (cnt > 0) { var e = currentWheelValue * cnt; roundScore += e; setMessage('Yes! ' + cnt + ' ' + letter + "'s for $" + e + '! Spin or solve.'); playCorrect(); }
            setMessage('Spinning...');
        else { setMessage('No ' + letter + "'s. Spin the wheel!"); playWrong(); }
            updateUI();
        gamePhase = 'spin';
           
        renderPuzzle();
            playWheelSpin(3000);
        updateUI();
           
         checkPuzzleComplete();
            const spins = 3 + Math.random() * 3;
    }
            const segmentAngle = 360 / WHEEL_SEGMENTS.length;
            const randomSegment = Math.floor(Math.random() * WHEEL_SEGMENTS.length);
            wheelRotation += (spins * 360) + (randomSegment * segmentAngle);
           
            const wheel = document.getElementById('wheel');
            wheel.style.transform = `rotate(${wheelRotation}deg)`;
           
            setTimeout(() => {
                const segment = WHEEL_SEGMENTS[randomSegment];
                currentWheelValue = segment.value;
                spinning = false;
               
                if (segment.value === 'BANKRUPT') {
                    roundScore = 0;
                    setMessage('BANKRUPT! You lost your round earnings. Spin again!');
                    gamePhase = 'spin';
                    playBankrupt();
                } else if (segment.value === 'LOSE TURN') {
                    setMessage('Lost your turn! Spin again.');
                    gamePhase = 'spin';
                    playWrong();
                } else {
                    setMessage(`$${segment.value}! Pick a consonant.`, segment.value);
                    gamePhase = 'guess';
                    playNote(880, 0.1, 'sine');
                }
                updateUI();
            }, 3000);
        }
 
        // Guess Letter
        function guessLetter(letter) {
            if (gamePhase !== 'guess' || revealedLetters.has(letter)) return;
           
            const upperAnswer = currentQuestion.answer.toUpperCase();
            const letterCount = (upperAnswer.match(new RegExp(letter, 'g')) || []).length;
           
            revealedLetters.add(letter);
           
            if (letterCount > 0) {
                const earned = currentWheelValue * letterCount;
                roundScore += earned;
                setMessage(`Yes! ${letterCount} ${letter}'s for $${earned}! Spin or solve.`);
                playCorrect();
            } else {
                setMessage(`No ${letter}'s. Spin the wheel!`);
                playWrong();
            }
           
            gamePhase = 'spin';
            renderPuzzle();
            updateUI();
            checkPuzzleComplete();
        }
 
         // Buy Vowel
        function buyVowel(vowel) {
            if (gamePhase !== 'spin' || revealedLetters.has(vowel) || roundScore < 250) return;
           
            roundScore -= 250;
           
            const upperAnswer = currentQuestion.answer.toUpperCase();
            const letterCount = (upperAnswer.match(new RegExp(vowel, 'g')) || []).length;
           
            revealedLetters.add(vowel);
           
            if (letterCount > 0) {
                setMessage(`Yes! ${letterCount} ${vowel}'s! Spin or solve.`);
                playCorrect();
            } else {
                setMessage(`No ${vowel}'s. Spin the wheel!`);
                playWrong();
            }
           
            renderPuzzle();
            updateUI();
            checkPuzzleComplete();
        }


        // Check Puzzle Complete
    function buyVowel(vowel) {
         function checkPuzzleComplete() {
         if (gamePhase !== 'spin' || revealedLetters.has(vowel) || roundScore < 250) return;
            const upperAnswer = currentQuestion.answer.toUpperCase();
        roundScore -= 250;
            const uniqueLetters = new Set(upperAnswer.replace(/[^A-Z]/g, '').split(''));
        var ans = currentQuestion.answer.toUpperCase();
            const allRevealed = [...uniqueLetters].every(l => revealedLetters.has(l));
        var cnt = (ans.match(new RegExp(vowel, 'g')) || []).length;
           
        revealedLetters.add(vowel);
            if (allRevealed) {
        if (cnt > 0) { setMessage('Yes! ' + cnt + ' ' + vowel + "'s! Spin or solve."); playCorrect(); }
                totalScore += roundScore;
        else { setMessage('No ' + vowel + "'s. Spin the wheel!"); playWrong(); }
                setMessage(`Puzzle Complete! You earned $${roundScore}!`);
        renderPuzzle();
                showResult(true);
        updateUI();
                playWin();
        checkPuzzleComplete();
            }
    }
        }


        // Attempt Solve
    function checkPuzzleComplete() {
        function attemptSolve() {
        var ans = currentQuestion.answer.toUpperCase();
            if (gamePhase !== 'spin') return;
        var unique = new Set(ans.replace(/[^A-Z]/g, '').split(''));
            gamePhase = 'solve';
        var allRevealed = true;
            document.getElementById('solveContainer').classList.remove('hidden');
        unique.forEach(function(l) { if (!revealedLetters.has(l)) allRevealed = false; });
            document.getElementById('actionButtons').classList.add('hidden');
        if (allRevealed) {
             document.getElementById('solveInput').focus();
             totalScore += roundScore;
             setMessage('Type your answer:');
            setMessage('Puzzle Complete! You earned $' + roundScore + '!');
            showResult(true);
             playWin();
         }
         }
    }


        // Submit Solve
    WON.attemptSolve = function() {
         function submitSolve() {
         if (gamePhase !== 'spin') return;
            const guess = document.getElementById('solveInput').value.toUpperCase().trim();
        gamePhase = 'solve';
            const answer = currentQuestion.answer.toUpperCase().trim();
        document.getElementById('wonSolveContainer').classList.remove('hidden');
           
        document.getElementById('wonActionButtons').classList.add('hidden');
            if (guess === answer) {
        document.getElementById('wonSolveInput').focus();
                totalScore += roundScore + 500;
        setMessage('Type your answer:');
                setMessage(`Correct! "${answer}" - You earned $${roundScore + 500}!`);
    };
                showResult(true);
                playWin();
            } else {
                setMessage(`Wrong! The answer was "${answer}".`);
                showResult(false);
                playLose();
            }
           
            document.getElementById('solveInput').value = '';
        }


        // Cancel Solve
    WON.submitSolve = function() {
        function cancelSolve() {
        var guess = document.getElementById('wonSolveInput').value.toUpperCase().trim();
            gamePhase = 'spin';
        var ans = currentQuestion.answer.toUpperCase().trim();
            document.getElementById('solveContainer').classList.add('hidden');
        if (guess === ans) { totalScore += roundScore + 500; setMessage('Correct! "' + ans + '" - You earned $' + (roundScore + 500) + '!'); showResult(true); playWin(); }
            document.getElementById('actionButtons').classList.remove('hidden');
        else { setMessage('Wrong! The answer was "' + ans + '".'); showResult(false); playLose(); }
            setMessage('Spin the wheel!');
         document.getElementById('wonSolveInput').value = '';
         }
    };


        // Use Hint
    WON.cancelSolve = function() {
        function useHint() {
        gamePhase = 'spin';
            if (hintUsed) return;
        document.getElementById('wonSolveContainer').classList.add('hidden');
            hintUsed = true;
        document.getElementById('wonActionButtons').classList.remove('hidden');
            roundScore = Math.max(0, roundScore - 200);
        setMessage('Spin the wheel!');
           
    };
            document.getElementById('hintText').textContent = currentQuestion.hint;
            document.getElementById('hintBox').classList.remove('hidden');
            document.getElementById('hintBtn').disabled = true;
           
            setMessage(`Hint used (-$200): ${currentQuestion.hint}`);
            updateUI();
            playNote(600, 0.05, 'square');
        }


        // Show Result
    WON.useHint = function() {
         function showResult(won) {
         if (hintUsed) return;
            gamePhase = won ? 'won' : 'lost';
        hintUsed = true;
           
        roundScore = Math.max(0, roundScore - 200);
            document.getElementById('wheelContainer').classList.add('hidden');
        document.getElementById('wonHintText').textContent = currentQuestion.hint;
            document.getElementById('letterBoard').classList.add('hidden');
        document.getElementById('wonHintBox').classList.remove('hidden');
            document.getElementById('actionButtons').classList.add('hidden');
        document.getElementById('wonHintBtn').disabled = true;
            document.getElementById('solveContainer').classList.add('hidden');
        setMessage('Hint used (-$200): ' + currentQuestion.hint);
           
        updateUI();
            const resultScreen = document.getElementById('resultScreen');
        playNote(600, 0.05, 'square');
            resultScreen.classList.remove('hidden', 'won', 'lost');
    };
            resultScreen.classList.add(won ? 'won' : 'lost');
           
            document.getElementById('resultTitle').textContent = won ? '🎉 Congratulations!' : '😔 Better Luck Next Time!';
            document.getElementById('finalScore').textContent = `$${totalScore}`;
        }


         // Next Puzzle
    function showResult(won) {
         function nextPuzzle() {
        gamePhase = won ? 'won' : 'lost';
            playNote(600, 0.05, 'square');
        document.getElementById('wonWheelContainer').classList.add('hidden');
            startNewRound();
        document.getElementById('wonLetterBoard').classList.add('hidden');
         }
        document.getElementById('wonActionButtons').classList.add('hidden');
         document.getElementById('wonSolveContainer').classList.add('hidden');
         var rs = document.getElementById('wonResultScreen');
        rs.classList.remove('hidden', 'won', 'lost');
        rs.classList.add(won ? 'won' : 'lost');
        document.getElementById('wonResultTitle').textContent = won ? '🎉 Congratulations!' : '😔 Better Luck Next Time!';
         document.getElementById('wonFinalScore').textContent = '$' + totalScore;
    }


        // New Game
    WON.nextPuzzle = function() { playNote(600, 0.05, 'square'); startNewRound(); };
        function newGame() {
    WON.newGame = function() { playNote(600, 0.05, 'square'); totalScore = 0; usedQuestions = []; startNewRound(); };
            playNote(600, 0.05, 'square');
            totalScore = 0;
            usedQuestions = [];
            startNewRound();
        }


        // Enter key for solve input
    document.getElementById('wonSolveInput').addEventListener('keypress', function(e) { if (e.key === 'Enter') WON.submitSolve(); });
        document.getElementById('solveInput').addEventListener('keypress', function(e) {
})();
            if (e.key === 'Enter') submitSolve();
</script>
        });
</html></includeonly>
    </script>
</div>
</includeonly>

Latest revision as of 00:37, 11 January 2026

This widget displays the Wheel of Nursing pharmacology game.

Usage

{{#widget:WheelOfNursing}}

Parameters

This widget does not accept any parameters.

Retrieved from "https://wiki.docmoates.com/index.php?title=Widget:WheelOfNursing&oldid=6634"