Widget:520FamilyFeud: 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 12: Line 12:
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
     min-height: 700px;
     min-height: 700px;
    height: 700px;
     color: white;
     color: white;
     padding: 20px;
     padding: 20px;
Line 18: Line 19:
     overflow: hidden;
     overflow: hidden;
}
}
.family-feud-nursing-game .ff-container { max-width: 1000px; margin: 0 auto; }
.family-feud-nursing-game .ff-container { max-width: 1000px; margin: 0 auto; height: 100%; }


.family-feud-nursing-game .ff-title { text-align: center; margin-bottom: 15px; }
.family-feud-nursing-game .ff-title { text-align: center; margin-bottom: 15px; }
Line 73: Line 74:
@keyframes ffStrikeFlash { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes ffStrikeFlash { 0% { transform: scale(1.4); } 100% { transform: scale(1); } }


/* Overlays - RELATIVE to game container, not fixed */
.family-feud-nursing-game .ff-x-overlay, .family-feud-nursing-game .ff-ding-overlay {
.family-feud-nursing-game .ff-x-overlay, .family-feud-nursing-game .ff-ding-overlay {
     position: absolute; top: 0; left: 0; width: 100%; height: 100%;
     position: absolute; top: 0; left: 0; width: 100%; height: 100%;
     display: none; align-items: center; justify-content: center; z-index: 50;
     display: none; align-items: center; justify-content: center; z-index: 50;
     pointer-events: none;
     pointer-events: none; border-radius: 12px;
}
}
.family-feud-nursing-game .ff-x-overlay { background: rgba(139, 0, 0, 0.9); }
.family-feud-nursing-game .ff-x-overlay { background: rgba(139, 0, 0, 0.9); }
Line 145: Line 145:
.family-feud-nursing-game .ff-btn:hover { transform: translateY(-2px); }
.family-feud-nursing-game .ff-btn:hover { transform: translateY(-2px); }


/* Start and Game Over - RELATIVE positioning, not fixed */
/* Start and Game Over screens - positioned within container */
.family-feud-nursing-game .ff-start, .family-feud-nursing-game .ff-gameover {
.family-feud-nursing-game .ff-start, .family-feud-nursing-game .ff-gameover {
     position: absolute; top: 0; left: 0; width: 100%; height: 100%;
     position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
     background: linear-gradient(135deg, #1a1a2e, #0f3460);
     background: linear-gradient(135deg, #1a1a2e, #0f3460);
     display: flex; flex-direction: column; align-items: center; justify-content: center;  
     display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
     z-index: 100;
     z-index: 100;
     border-radius: 12px;
     border-radius: 12px;
}
}
.family-feud-nursing-game .ff-start.ff-hidden, .family-feud-nursing-game .ff-gameover:not(.ff-show) { display: none; }
.family-feud-nursing-game .ff-start.ff-hidden { display: none; }
.family-feud-nursing-game .ff-gameover { display: none; }
.family-feud-nursing-game .ff-gameover.ff-show { display: flex; }
 
.family-feud-nursing-game .ff-start-title {
.family-feud-nursing-game .ff-start-title {
     font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem;
     font-family: 'Bebas Neue', sans-serif; font-size: 3.5rem;
Line 186: Line 196:
.family-feud-nursing-game .ff-progress { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-bottom: 12px; }
.family-feud-nursing-game .ff-progress { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; margin-bottom: 12px; }
.family-feud-nursing-game .ff-progress-fill { height: 100%; background: linear-gradient(90deg, #00d4ff, #ffd700); border-radius: 3px; transition: width 0.5s; }
.family-feud-nursing-game .ff-progress-fill { height: 100%; background: linear-gradient(90deg, #00d4ff, #ffd700); border-radius: 3px; transition: width 0.5s; }
.family-feud-nursing-game .ff-game-content { display: none; }
.family-feud-nursing-game .ff-game-content.ff-visible { display: block; }


@media (max-width: 768px) {
@media (max-width: 768px) {
Line 199: Line 212:
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@400;600;700&display=swap" rel="stylesheet">


<!-- Overlays -->
<div class="ff-x-overlay" id="ffXOverlay"><div class="ff-big-x">✖</div></div>
<div class="ff-x-overlay" id="ffXOverlay"><div class="ff-big-x">✖</div></div>
<div class="ff-ding-overlay" id="ffDingOverlay"><div class="ff-ding-text">✓</div></div>
<div class="ff-ding-overlay" id="ffDingOverlay"><div class="ff-ding-text">✓</div></div>


<!-- Start Screen - inside main container -->
<div class="ff-start" id="ffStart">
<div class="ff-start" id="ffStart">
     <div class="ff-start-title">FAMILY FEUD</div>
     <div class="ff-start-title">FAMILY FEUD</div>
Line 214: Line 229:
</div>
</div>


<!-- Game Over Screen -->
<div class="ff-gameover" id="ffGameOver">
<div class="ff-gameover" id="ffGameOver">
     <div class="ff-start-emoji">🏆</div>
     <div class="ff-start-emoji">🏆</div>
Line 221: Line 237:
</div>
</div>


<div class="ff-container">
<!-- Game Content - hidden until play is clicked -->
<div class="ff-game-content" id="ffGameContent">
     <div class="ff-title">
     <div class="ff-title">
         <h1>FAMILY FEUD</h1>
         <h1>FAMILY FEUD</h1>
Line 274: Line 291:
     </div>
     </div>
</div>
</div>
</div>
</div>


Line 541: Line 559:
             playReveal();
             playReveal();
             document.getElementById('ffStart').classList.add('ff-hidden');
             document.getElementById('ffStart').classList.add('ff-hidden');
            document.getElementById('ffGameContent').classList.add('ff-visible');
             loadQuestion();
             loadQuestion();
         },
         },
Line 576: Line 595:
             if (currentQ >= questions.length) {
             if (currentQ >= questions.length) {
                 playApplause();
                 playApplause();
                document.getElementById('ffGameContent').classList.remove('ff-visible');
                 document.getElementById('ffGameOver').classList.add('ff-show');
                 document.getElementById('ffGameOver').classList.add('ff-show');
                 document.getElementById('ffFinalScore').textContent = score;
                 document.getElementById('ffFinalScore').textContent = score;
Line 587: Line 607:
             document.getElementById('ffScore').textContent = '0';
             document.getElementById('ffScore').textContent = '0';
             document.getElementById('ffGameOver').classList.remove('ff-show');
             document.getElementById('ffGameOver').classList.remove('ff-show');
            document.getElementById('ffGameContent').classList.remove('ff-visible');
             document.getElementById('ffStart').classList.remove('ff-hidden');
             document.getElementById('ffStart').classList.remove('ff-hidden');
         },
         },

Revision as of 01:18, 11 January 2026

This widget displays the Family Feud Nursing Edition study game.

Usage

{{#widget:FamilyFeudNursing}}
Retrieved from "https://wiki.docmoates.com/index.php?title=Widget:520FamilyFeud&oldid=6659"