Widget:WheelOfNursing: Difference between revisions

From Doc-Wiki
Jump to navigation Jump to search
← Older editNewer 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
Line 4: Line 4:
== Usage ==
== Usage ==
<pre>{{#widget:WheelOfNursing}}</pre>
<pre>{{#widget:WheelOfNursing}}</pre>
</noinclude><includeonly>
 
== Parameters ==
This widget does not accept any parameters.
 
[[Category:Widgets]]
</noinclude><includeonly><style>
#wheel-of-nursing-game {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    min-height: 600px;
    color: #fff;
    padding: 20px;
    border-radius: 10px;
    position: relative;
}
 
#wheel-of-nursing-game * {
    box-sizing: border-box;
}
 
#wheel-of-nursing-game .game-container {
    max-width: 900px;
    margin: 0 auto;
}
 
#wheel-of-nursing-game .sound-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    padding: 15px;
    border-radius: 10px;
    z-index: 100;
}
 
#wheel-of-nursing-game .sound-controls button {
    padding: 8px 12px;
    margin: 2px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
}
 
#wheel-of-nursing-game .sound-controls .on { background: #2ecc71; }
#wheel-of-nursing-game .sound-controls .off { background: #e74c3c; }
 
#wheel-of-nursing-game .volume-control {
    margin-top: 10px;
    color: #fff;
    font-size: 12px;
}
 
#wheel-of-nursing-game .volume-control input {
    width: 100px;
    margin-left: 5px;
}
 
#wheel-of-nursing-game .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}
 
#wheel-of-nursing-game .header h1 {
    color: #ffd700;
    font-size: 32px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    margin: 0;
    border: none;
}
 
#wheel-of-nursing-game .scores {
    display: flex;
    gap: 20px;
}
 
#wheel-of-nursing-game .score-box {
    padding: 10px 20px;
    border-radius: 10px;
    text-align: center;
}
 
#wheel-of-nursing-game .score-box.round {
    background: rgba(255,215,0,0.2);
    border: 2px solid #ffd700;
}
 
#wheel-of-nursing-game .score-box.total {
    background: rgba(46,204,113,0.2);
    border: 2px solid #2ecc71;
}
 
#wheel-of-nursing-game .score-box .label {
    font-size: 12px;
    color: #ffd700;
}
 
#wheel-of-nursing-game .score-box.total .label {
    color: #2ecc71;
}
 
#wheel-of-nursing-game .score-box .value {
    font-size: 28px;
    font-weight: bold;
}
 
#wheel-of-nursing-game .message-box {
    background: rgba(255,255,255,0.1);
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 18px;
}
 
#wheel-of-nursing-game .message-box .wheel-value {
    color: #ffd700;
    font-weight: bold;
    margin-left: 10px;
}
 
#wheel-of-nursing-game .puzzle-board {
    background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
 
#wheel-of-nursing-game .category {
    color: #ffd700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    text-align: center;
}
 
#wheel-of-nursing-game .letter-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}
 
#wheel-of-nursing-game .letter-tile {
    width: 45px;
    height: 55px;
    border: 3px solid #ffd700;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    color: #1a237e;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
 
#wheel-of-nursing-game .letter-tile.revealed {
    background: #fff;
}
 
#wheel-of-nursing-game .letter-tile.hidden {
    background: #1a237e;
}
 
#wheel-of-nursing-game .letter-tile.space {
    border: none;
    background: transparent;
    box-shadow: none;
}
 
#wheel-of-nursing-game .clue-box {
    color: #fff;
    font-size: 16px;
    font-style: italic;
    padding: 15px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    text-align: center;
}
 
#wheel-of-nursing-game .wheel-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto 20px;
}
 
#wheel-of-nursing-game .wheel-pointer {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 30px solid #ffd700;
    z-index: 10;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
 
#wheel-of-nursing-game .wheel-svg {
    width: 100%;
    height: 100%;
    transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
 
#wheel-of-nursing-game .letter-board {
    margin-bottom: 20px;
}
 
#wheel-of-nursing-game .letter-section {
    margin-bottom: 15px;
}
 
#wheel-of-nursing-game .letter-section-label {
    color: #ffd700;
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-align: center;
}
 
#wheel-of-nursing-game .letter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}
 
#wheel-of-nursing-game .letter-btn {
    width: 36px;
    height: 36px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    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; }
 
#wheel-of-nursing-game .letter-btn.vowel {
    width: 45px;
    height: 45px;
    font-size: 18px;
    background: #e74c3c;
}
#wheel-of-nursing-game .letter-btn.vowel:disabled { background: #555; opacity: 0.5; cursor: not-allowed; }
#wheel-of-nursing-game .letter-btn.vowel.inactive { background: #888; cursor: not-allowed; }
 
#wheel-of-nursing-game .action-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
 
#wheel-of-nursing-game .action-btn {
    padding: 15px 40px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.2s;
}
 
#wheel-of-nursing-game .action-btn:hover:not(:disabled) {
    transform: scale(1.05);
}
 
#wheel-of-nursing-game .action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
 
#wheel-of-nursing-game .action-btn.spin {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #1a237e;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}
 
#wheel-of-nursing-game .action-btn.solve {
    background: #9b59b6;
    color: #fff;
}
 
#wheel-of-nursing-game .action-btn.hint {
    background: #3498db;
    color: #fff;
}
 
#wheel-of-nursing-game .hint-box {
    margin-top: 15px;
    padding: 15px;
    background: rgba(52, 152, 219, 0.3);
    border-radius: 10px;
    text-align: center;
    border: 2px solid #3498db;
}
 
#wheel-of-nursing-game .solve-input-container {
    text-align: center;
    margin-bottom: 20px;
}
 
#wheel-of-nursing-game .solve-input {
    padding: 15px 20px;
    font-size: 20px;
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    border: 3px solid #ffd700;
    margin-bottom: 10px;
}
 
#wheel-of-nursing-game .solve-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}
 
#wheel-of-nursing-game .solve-btn {
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    color: #fff;
}
 
#wheel-of-nursing-game .solve-btn.submit { background: #2ecc71; }
#wheel-of-nursing-game .solve-btn.cancel { background: #e74c3c; }
 
#wheel-of-nursing-game .result-screen {
    text-align: center;
    margin-top: 30px;
    padding: 30px;
    border-radius: 15px;
}
 
#wheel-of-nursing-game .result-screen.won {
    background: rgba(46, 204, 113, 0.2);
    border: 3px solid #2ecc71;
}
 
#wheel-of-nursing-game .result-screen.lost {
    background: rgba(231, 76, 60, 0.2);
    border: 3px solid #e74c3c;
}
 
#wheel-of-nursing-game .result-screen h2 {
    font-size: 32px;
    margin-bottom: 15px;
    border: none;
}
 
#wheel-of-nursing-game .result-screen.won h2 { color: #2ecc71; }
#wheel-of-nursing-game .result-screen.lost h2 { color: #e74c3c; }
 
#wheel-of-nursing-game .result-screen p {
    font-size: 18px;
    margin-bottom: 20px;
}
 
#wheel-of-nursing-game .result-screen .total-score {
    color: #ffd700;
    font-weight: bold;
}
 
#wheel-of-nursing-game .result-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}
 
#wheel-of-nursing-game .result-btn {
    padding: 15px 40px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    cursor: pointer;
}
 
#wheel-of-nursing-game .result-btn.next {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #1a237e;
}
 
#wheel-of-nursing-game .result-btn.new-game {
    background: #e74c3c;
    color: #fff;
}
 
#wheel-of-nursing-game .start-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 500px;
    text-align: center;
}
 
#wheel-of-nursing-game .start-screen h1 {
    color: #ffd700;
    font-size: 48px;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
    margin-bottom: 20px;
    border: none;
}
 
#wheel-of-nursing-game .start-screen p {
    font-size: 18px;
    max-width: 600px;
    margin-bottom: 30px;
    line-height: 1.6;
}
 
#wheel-of-nursing-game .sound-notice {
    background: rgba(255,255,255,0.1);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
}
 
#wheel-of-nursing-game .sound-notice p:first-child {
    color: #ffd700;
    margin-bottom: 10px;
}
 
#wheel-of-nursing-game .sound-notice p:last-child {
    color: #aaa;
    font-size: 14px;
    margin-bottom: 0;
}
 
#wheel-of-nursing-game .start-btn {
    padding: 20px 60px;
    font-size: 24px;
    font-weight: bold;
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    color: #1a237e;
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
    transition: transform 0.2s;
}
 
#wheel-of-nursing-game .start-btn:hover {
    transform: scale(1.05);
}
 
#wheel-of-nursing-game .hidden {
    display: none !important;
}
</style>
 
<div id="wheel-of-nursing-game">
<div id="wheel-of-nursing-game">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wheel of Nursing - Pharmacology Game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
       
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
            min-height: 100vh;
            color: #fff;
        }
       
        .game-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }
       
        /* Sound Controls */
        .sound-controls {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            padding: 15px;
            border-radius: 10px;
            z-index: 100;
        }
       
        .sound-controls button {
            padding: 8px 12px;
            margin: 2px;
            font-size: 14px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            color: #fff;
        }
       
        .sound-controls .on { background: #2ecc71; }
        .sound-controls .off { background: #e74c3c; }
       
        .volume-control {
            margin-top: 10px;
            color: #fff;
            font-size: 12px;
        }
       
        .volume-control input {
            width: 100px;
            margin-left: 5px;
        }
       
        /* Header */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }
       
        .header h1 {
            color: #ffd700;
            font-size: 32px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
        }
       
        .scores {
            display: flex;
            gap: 20px;
        }
       
        .score-box {
            padding: 10px 20px;
            border-radius: 10px;
            text-align: center;
        }
       
        .score-box.round {
            background: rgba(255,215,0,0.2);
            border: 2px solid #ffd700;
        }
       
        .score-box.total {
            background: rgba(46,204,113,0.2);
            border: 2px solid #2ecc71;
        }
       
        .score-box .label {
            font-size: 12px;
            color: #ffd700;
        }
       
        .score-box.total .label {
            color: #2ecc71;
        }
       
        .score-box .value {
            font-size: 28px;
            font-weight: bold;
        }
       
        /* Message Box */
        .message-box {
            background: rgba(255,255,255,0.1);
            padding: 15px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
            font-size: 18px;
        }
       
        .message-box .wheel-value {
            color: #ffd700;
            font-weight: bold;
            margin-left: 10px;
        }
       
        /* Puzzle Board */
        .puzzle-board {
            background: linear-gradient(135deg, #1a237e 0%, #0d47a1 100%);
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
       
        .category {
            color: #ffd700;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: 15px;
            text-align: center;
        }
       
        .letter-tiles {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-bottom: 20px;
        }
       
        .letter-tile {
            width: 45px;
            height: 55px;
            border: 3px solid #ffd700;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            font-weight: bold;
            color: #1a237e;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
       
        .letter-tile.revealed {
            background: #fff;
        }
       
        .letter-tile.hidden {
            background: #1a237e;
        }
       
        .letter-tile.space {
            border: none;
            background: transparent;
            box-shadow: none;
        }
       
        .clue-box {
            color: #fff;
            font-size: 16px;
            font-style: italic;
            padding: 15px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            text-align: center;
        }
       
        /* Wheel */
        .wheel-container {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 0 auto 20px;
        }
       
        .wheel-pointer {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            border-top: 30px solid #ffd700;
            z-index: 10;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
        }
       
        .wheel-svg {
            width: 100%;
            height: 100%;
            transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99);
        }
       
        /* Letter Board */
        .letter-board {
            margin-bottom: 20px;
        }
       
        .letter-section {
            margin-bottom: 15px;
        }
       
        .letter-section-label {
            color: #ffd700;
            font-size: 12px;
            letter-spacing: 2px;
            margin-bottom: 8px;
            text-align: center;
        }
       
        .letter-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            justify-content: center;
        }
       
        .letter-btn {
            width: 36px;
            height: 36px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            color: #fff;
            transition: all 0.2s;
        }
       
        .letter-btn.consonant { background: #2ecc71; }
        .letter-btn.consonant:disabled { background: #555; opacity: 0.5; cursor: not-allowed; }
        .letter-btn.consonant.inactive { background: #888; cursor: not-allowed; }
       
        .letter-btn.vowel {
            width: 45px;
            height: 45px;
            font-size: 18px;
            background: #e74c3c;
        }
        .letter-btn.vowel:disabled { background: #555; opacity: 0.5; cursor: not-allowed; }
        .letter-btn.vowel.inactive { background: #888; cursor: not-allowed; }
       
        /* Action Buttons */
        .action-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
       
        .action-btn {
            padding: 15px 40px;
            font-size: 18px;
            font-weight: bold;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: transform 0.2s;
        }
       
        .action-btn:hover:not(:disabled) {
            transform: scale(1.05);
        }
       
        .action-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
       
        .action-btn.spin {
            background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
            color: #1a237e;
            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
        }
       
        .action-btn.solve {
            background: #9b59b6;
            color: #fff;
        }
       
        .action-btn.hint {
            background: #3498db;
            color: #fff;
        }
       
        /* Hint Box */
        .hint-box {
            margin-top: 15px;
            padding: 15px;
            background: rgba(52, 152, 219, 0.3);
            border-radius: 10px;
            text-align: center;
            border: 2px solid #3498db;
        }
       
        /* Solve Input */
        .solve-input-container {
            text-align: center;
            margin-bottom: 20px;
        }
       
        .solve-input {
            padding: 15px 20px;
            font-size: 20px;
            width: 100%;
            max-width: 400px;
            border-radius: 10px;
            border: 3px solid #ffd700;
            margin-bottom: 10px;
        }
       
        .solve-buttons {
            display: flex;
            gap: 10px;
            justify-content: center;
        }
       
        .solve-btn {
            padding: 12px 30px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            color: #fff;
        }
       
        .solve-btn.submit { background: #2ecc71; }
        .solve-btn.cancel { background: #e74c3c; }
       
        /* Result Screen */
        .result-screen {
            text-align: center;
            margin-top: 30px;
            padding: 30px;
            border-radius: 15px;
        }
       
        .result-screen.won {
            background: rgba(46, 204, 113, 0.2);
            border: 3px solid #2ecc71;
        }
       
        .result-screen.lost {
            background: rgba(231, 76, 60, 0.2);
            border: 3px solid #e74c3c;
        }
       
        .result-screen h2 {
            font-size: 32px;
            margin-bottom: 15px;
        }
       
        .result-screen.won h2 { color: #2ecc71; }
        .result-screen.lost h2 { color: #e74c3c; }
       
        .result-screen p {
            font-size: 18px;
            margin-bottom: 20px;
        }
       
        .result-screen .total-score {
            color: #ffd700;
            font-weight: bold;
        }
       
        .result-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
        }
       
        .result-btn {
            padding: 15px 40px;
            font-size: 18px;
            font-weight: bold;
            border: none;
            border-radius: 30px;
            cursor: pointer;
        }
       
        .result-btn.next {
            background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
            color: #1a237e;
        }
       
        .result-btn.new-game {
            background: #e74c3c;
            color: #fff;
        }
       
        /* Start Screen */
        .start-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 80vh;
            text-align: center;
        }
       
        .start-screen h1 {
            color: #ffd700;
            font-size: 48px;
            text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
            margin-bottom: 20px;
        }
       
        .start-screen p {
            font-size: 18px;
            max-width: 600px;
            margin-bottom: 30px;
            line-height: 1.6;
        }
       
        .sound-notice {
            background: rgba(255,255,255,0.1);
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
        }
       
        .sound-notice p:first-child {
            color: #ffd700;
            margin-bottom: 10px;
        }
       
        .sound-notice p:last-child {
            color: #aaa;
            font-size: 14px;
            margin-bottom: 0;
        }
       
        .start-btn {
            padding: 20px 60px;
            font-size: 24px;
            font-weight: bold;
            background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
            border: none;
            border-radius: 50px;
            cursor: pointer;
            color: #1a237e;
            box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
            transition: transform 0.2s;
        }
       
        .start-btn:hover {
            transform: scale(1.05);
        }
       
        /* 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 501:
                 <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 510:
                     <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 = [
    // Namespace to avoid conflicts with MediaWiki
            { category: "CARDIOVASCULAR", clue: "This class of medications ending in '-pril' treats hypertension by blocking angiotensin conversion", answer: "ACE INHIBITORS", hint: "Think lisinopril, enalapril" },
    window.WON = window.WON || {};
            { 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: "RESPIRATORY", clue: "This bronchodilator class ending in '-terol' provides quick relief for asthma attacks", answer: "BETA AGONISTS", hint: "Albuterol is an example" },
    const QUESTIONS = [
            { category: "PAIN MANAGEMENT", clue: "This opioid antagonist reverses respiratory depression from narcotic overdose", answer: "NALOXONE", hint: "Brand name Narcan" },
        { category: "CARDIOVASCULAR", clue: "This class of medications ending in '-pril' treats hypertension by blocking angiotensin conversion", answer: "ACE INHIBITORS", hint: "Think lisinopril, enalapril" },
            { 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: "ENDOCRINE", clue: "This hormone produced by beta cells of the pancreas lowers blood glucose levels", answer: "INSULIN", hint: "Diabetic patients may inject this" },
            { category: "PSYCHIATRIC", clue: "This class of antidepressants selectively inhibits serotonin reuptake", answer: "SSRI", hint: "Prozac and Zoloft belong here" },
        { category: "RESPIRATORY", clue: "This bronchodilator class ending in '-terol' provides quick relief for asthma attacks", answer: "BETA AGONISTS", hint: "Albuterol is an example" },
            { 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: "PAIN MANAGEMENT", clue: "This opioid antagonist reverses respiratory depression from narcotic overdose", answer: "NALOXONE", hint: "Brand name Narcan" },
            { 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: "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: "NEUROLOGICAL", clue: "This medication is the first-line treatment for status epilepticus", answer: "BENZODIAZEPINES", hint: "Lorazepam or diazepam" },
        { category: "PSYCHIATRIC", clue: "This class of antidepressants selectively inhibits serotonin reuptake", answer: "SSRI", hint: "Prozac and Zoloft belong here" },
            { category: "MUSCULOSKELETAL", clue: "This bisphosphonate medication treats osteoporosis by inhibiting bone resorption", answer: "ALENDRONATE", hint: "Brand name Fosamax" },
        { 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: "FUNDAMENTALS", clue: "These are the six rights of medication administration: right patient, drug, dose, route, time, and this", answer: "DOCUMENTATION", hint: "Record keeping" },
        { 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: "FLUID & ELECTROLYTE", clue: "This electrolyte imbalance causes peaked T waves on ECG and requires immediate treatment", answer: "HYPERKALEMIA", hint: "Too much potassium" },
        { category: "NEUROLOGICAL", clue: "This medication is the first-line treatment for status epilepticus", answer: "BENZODIAZEPINES", hint: "Lorazepam or diazepam" },
            { category: "INFECTION", clue: "This antibiotic class ending in '-cillin' works by inhibiting cell wall synthesis", answer: "PENICILLINS", hint: "Amoxicillin belongs here" },
        { category: "MUSCULOSKELETAL", clue: "This bisphosphonate medication treats osteoporosis by inhibiting bone resorption", answer: "ALENDRONATE", hint: "Brand name Fosamax" },
            { 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: "FUNDAMENTALS", clue: "These are the six rights of medication administration: right patient, drug, dose, route, time, and this", answer: "DOCUMENTATION", hint: "Record keeping" },
            { category: "CARDIOVASCULAR", clue: "This cardiac glycoside from the foxglove plant increases cardiac contractility", answer: "DIGOXIN", hint: "Check apical pulse before giving" },
        { category: "FLUID & ELECTROLYTE", clue: "This electrolyte imbalance causes peaked T waves on ECG and requires immediate treatment", answer: "HYPERKALEMIA", hint: "Too much potassium" },
            { 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: "INFECTION", clue: "This antibiotic class ending in '-cillin' works by inhibiting cell wall synthesis", answer: "PENICILLINS", hint: "Amoxicillin belongs here" },
            { 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: "SENSORY", clue: "These eye drops ending in '-olol' treat glaucoma by reducing aqueous humor production", answer: "BETA BLOCKERS", hint: "Timolol is commonly used" },
            { category: "TEACHING", clue: "This teaching method uses return demonstration to verify patient understanding", answer: "TEACH BACK", hint: "Show me how you would..." }
        { category: "CARDIOVASCULAR", clue: "This cardiac glycoside from the foxglove plant increases cardiac contractility", answer: "DIGOXIN", hint: "Check apical pulse before giving" },
        ];
        { 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 = [
    const 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('');
    const CONSONANTS = 'BCDFGHJKLMNPQRSTVWXYZ'.split('');
        const VOWELS = ['A', 'E', 'I', 'O', 'U'];
    const VOWELS = ['A', 'E', 'I', 'O', 'U'];


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


        // Audio
    let audioContext = null;
        let audioContext = null;
    let musicGain = null;
        let musicGain = null;
    let sfxGain = null;
        let sfxGain = null;
    let musicEnabled = true;
        let musicEnabled = true;
    let sfxEnabled = true;
        let sfxEnabled = true;
    let 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();
        const osc = audioContext.createOscillator();
            osc.type = type;
        const 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();
        const osc = audioContext.createOscillator();
            const clickGain = audioContext.createGain();
        const 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;
        let time = 0;
            const baseInterval = 30;
        for (let i = 0; i < 60; i++) {
            let time = 0;
            const 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((f, i) => setTimeout(() => 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();
        const osc = audioContext.createOscillator();
            const wrongGain = audioContext.createGain();
        const 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((f, i) => setTimeout(() => 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 = [
        const 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 },
        let t = 0;
                { freq: 523.25, dur: 0.4 }, { freq: 415.30, dur: 0.4 }, { freq: 466.16, dur: 0.4 },
        m.forEach(n => { setTimeout(() => 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((f, i) => setTimeout(() => 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();
        const osc = audioContext.createOscillator();
            const noteGain = audioContext.createGain();
        const 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 = [
        const 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 },
        const 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 },
        let t = 0;
            ];
        bass.forEach(n => { setTimeout(() => { if(musicPlaying) playMusicNote(n.f, n.d*0.9, 'triangle'); }, t); t += n.d*500; });
            const melody = [
        let mt = 250;
                { freq: 523.25, dur: 0.25 }, { freq: 587.33, dur: 0.25 }, { freq: 659.25, dur: 0.5 },
        mel.forEach(n => { setTimeout(() => { 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(() => { 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');
        const 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');
        const 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;
        const svg = document.getElementById('wonWheel');
         }
        svg.innerHTML = '';
        const segAngle = 360 / WHEEL_SEGMENTS.length;
         WHEEL_SEGMENTS.forEach((seg, i) => {
            const sa = i * segAngle, ea = (i+1) * segAngle;
            const sr = (sa-90)*Math.PI/180, er = (ea-90)*Math.PI/180;
            const x1 = 100+90*Math.cos(sr), y1 = 100+90*Math.sin(sr);
            const x2 = 100+90*Math.cos(er), y2 = 100+90*Math.sin(er);
            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', seg.color);
            path.setAttribute('stroke', '#fff');
            path.setAttribute('stroke-width', '2');
            svg.appendChild(path);
            const ma = ((sa+ea)/2-90)*Math.PI/180;
            const tx = 100+60*Math.cos(ma), ty = 100+60*Math.sin(ma);
            const 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);
        });
        const 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() {
        const cont = document.getElementById('wonLetterTiles');
            const svg = document.getElementById('wheel');
        cont.innerHTML = '';
            svg.innerHTML = '';
        currentQuestion.answer.toUpperCase().split('').forEach(ch => {
            const segmentAngle = 360 / WHEEL_SEGMENTS.length;
            const 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() {
        const cc = document.getElementById('wonConsonants'), vc = document.getElementById('wonVowels');
            const container = document.getElementById('letterTiles');
        cc.innerHTML = ''; vc.innerHTML = '';
            container.innerHTML = '';
        CONSONANTS.forEach(l => {
            const answer = currentQuestion.answer.toUpperCase();
            const 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 = () => guessLetter(l);
                if (char === ' ') {
            cc.appendChild(btn);
                    tile.classList.add('space');
        });
                } else if (revealedLetters.has(char) || !/[A-Z]/.test(char)) {
        VOWELS.forEach(v => {
                    tile.classList.add('revealed');
            const 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 = () => 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');
        const 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}`;
        const 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() {
         let avail = QUESTIONS.filter((_, i) => !usedQuestions.includes(i));
            initAudio();
         if (avail.length === 0) { usedQuestions = []; avail = QUESTIONS; }
            if (musicEnabled) startMusic();
        const 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);
        const spins = 3 + Math.random() * 3;
            currentQuestion = QUESTIONS[index];
        const segAngle = 360 / WHEEL_SEGMENTS.length;
           
        const 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(() => {
             gamePhase = 'spin';
             const 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;
        const ans = currentQuestion.answer.toUpperCase();
           
        const cnt = (ans.match(new RegExp(letter, 'g')) || []).length;
            initAudio();
        revealedLetters.add(letter);
            spinning = true;
        if (cnt > 0) { const 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(''));
        const ans = currentQuestion.answer.toUpperCase();
            const allRevealed = [...uniqueLetters].every(l => revealedLetters.has(l));
        const 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() {
        const ans = currentQuestion.answer.toUpperCase();
            if (gamePhase !== 'spin') return;
        const unique = new Set(ans.replace(/[^A-Z]/g, '').split(''));
            gamePhase = 'solve';
        if ([...unique].every(l => revealedLetters.has(l))) {
            document.getElementById('solveContainer').classList.remove('hidden');
            totalScore += roundScore;
            document.getElementById('actionButtons').classList.add('hidden');
             setMessage(`Puzzle Complete! You earned $${roundScore}!`);
             document.getElementById('solveInput').focus();
            showResult(true);
             setMessage('Type your answer:');
             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() {
        const guess = document.getElementById('wonSolveInput').value.toUpperCase().trim();
            gamePhase = 'spin';
        const 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');
         const 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>
        });
    </script>
</div>
</includeonly>
</includeonly>

Revision as of 00:33, 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=6633"