commit ea177a874ea5b1f10647b40f7de5e35e1c10dc67
Author: root <root@hub.scroll.pub>
Date: 2024-12-24 01:21:42 +0000
Subject: Initial commit
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..ce65edc
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+# familyquiz.scroll.pub
+Website generated from prompt: make a family feud game wehre they asked people 100 things or whatever and you gotta guess and you get points if correct
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..54ca813
--- /dev/null
+++ b/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="Play Family Quiz - a fun survey guessing game where you compete to match popular answers!">
+ <meta name="keywords" content="family quiz, survey game, family feud, multiplayer game">
+ <title>Family Quiz - Survey Guessing Game</title>
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <header>
+ <h1>Family Quiz</h1>
+ <div class="score-display">Score: <span id="score">0</span></div>
+ </header>
+
+ <main>
+ <div class="game-board">
+ <div class="question-panel">
+ <h2 id="current-question">Name something people do before going to bed.</h2>
+ <div class="answers-remaining">Answers remaining: <span id="answers-left">5</span></div>
+ </div>
+
+ <div class="answer-slots">
+ <div class="answer-row">
+ <div class="number">1</div>
+ <div class="answer hidden" data-points="45">Brush teeth</div>
+ <div class="points">45</div>
+ </div>
+ <div class="answer-row">
+ <div class="number">2</div>
+ <div class="answer hidden" data-points="25">Read book</div>
+ <div class="points">25</div>
+ </div>
+ <div class="answer-row">
+ <div class="number">3</div>
+ <div class="answer hidden" data-points="15">Set alarm</div>
+ <div class="points">15</div>
+ </div>
+ <div class="answer-row">
+ <div class="number">4</div>
+ <div class="answer hidden" data-points="10">Change clothes</div>
+ <div class="points">10</div>
+ </div>
+ <div class="answer-row">
+ <div class="number">5</div>
+ <div class="answer hidden" data-points="5">Check phone</div>
+ <div class="points">5</div>
+ </div>
+ </div>
+
+ <div class="input-area">
+ <input type="text" id="answer-input" placeholder="Enter your guess..." aria-label="Enter your guess">
+ <button id="submit-answer">Submit</button>
+ </div>
+
+ <div class="strikes">
+ <span class="strike">X</span>
+ <span class="strike">X</span>
+ <span class="strike">X</span>
+ </div>
+ </div>
+
+ <div class="controls">
+ <button id="new-game">New Game</button>
+ <button id="next-question" disabled>Next Question</button>
+ </div>
+ </main>
+
+ <footer>
+ <p>Made with love for quiz enthusiasts</p>
+ </footer>
+ <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..9068632
--- /dev/null
+++ b/script.js
@@ -0,0 +1,129 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const questions = [
+ {
+ question: "Name something people do before going to bed.",
+ answers: [
+ { text: "Brush teeth", points: 45 },
+ { text: "Read book", points: 25 },
+ { text: "Set alarm", points: 15 },
+ { text: "Change clothes", points: 10 },
+ { text: "Check phone", points: 5 }
+ ]
+ },
+ {
+ question: "Name a favorite pizza topping.",
+ answers: [
+ { text: "Pepperoni", points: 40 },
+ { text: "Cheese", points: 30 },
+ { text: "Mushrooms", points: 15 },
+ { text: "Sausage", points: 10 },
+ { text: "Olives", points: 5 }
+ ]
+ }
+ // Add more questions here
+ ];
+
+ let currentQuestion = 0;
+ let score = 0;
+ let strikes = 0;
+ let foundAnswers = new Set();
+
+ const gameElements = {
+ score: document.getElementById('score'),
+ questionText: document.getElementById('current-question'),
+ answerInput: document.getElementById('answer-input'),
+ submitButton: document.getElementById('submit-answer'),
+ newGameButton: document.getElementById('new-game'),
+ nextQuestionButton: document.getElementById('next-question'),
+ answersLeft: document.getElementById('answers-left'),
+ strikeElements: document.querySelectorAll('.strike'),
+ answerSlots: document.querySelectorAll('.answer')
+ };
+
+ function initializeGame() {
+ currentQuestion = 0;
+ score = 0;
+ strikes = 0;
+ foundAnswers.clear();
+ updateUI();
+ loadQuestion();
+ }
+
+ function loadQuestion() {
+ const question = questions[currentQuestion];
+ gameElements.questionText.textContent = question.question;
+ gameElements.answersLeft.textContent = question.answers.length;
+ resetAnswerSlots();
+ foundAnswers.clear();
+ strikes = 0;
+ updateStrikes();
+ }
+
+ function resetAnswerSlots() {
+ gameElements.answerSlots.forEach(slot => {
+ slot.classList.add('hidden');
+ });
+ }
+
+ function updateUI() {
+ gameElements.score.textContent = score;
+ gameElements.nextQuestionButton.disabled = foundAnswers.size !== questions[currentQuestion].answers.length;
+ gameElements.answerInput.value = '';
+ gameElements.answersLeft.textContent = questions[currentQuestion].answers.length - foundAnswers.size;
+ }
+
+ function updateStrikes() {
+ gameElements.strikeElements.forEach((strike, index) => {
+ strike.classList.toggle('active', index < strikes);
+ });
+ }
+
+ function checkAnswer(input) {
+ const currentAnswers = questions[currentQuestion].answers;
+ const normalizedInput = input.toLowerCase().trim();
+
+ for (let i = 0; i < currentAnswers.length; i++) {
+ const answer = currentAnswers[i];
+ if (answer.text.toLowerCase() === normalizedInput && !foundAnswers.has(i)) {
+ foundAnswers.add(i);
+ score += answer.points;
+ gameElements.answerSlots[i].classList.remove('hidden');
+ updateUI();
+ return true;
+ }
+ }
+ return false;
+ }
+
+ gameElements.submitButton.addEventListener('click', () => {
+ const input = gameElements.answerInput.value;
+ if (input.trim() === '') return;
+
+ if (!checkAnswer(input)) {
+ strikes++;
+ updateStrikes();
+ if (strikes >= 3) {
+ alert('Game Over! Three strikes!');
+ initializeGame();
+ }
+ }
+ gameElements.answerInput.value = '';
+ gameElements.answerInput.focus();
+ });
+
+ gameElements.answerInput.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') {
+ gameElements.submitButton.click();
+ }
+ });
+
+ gameElements.newGameButton.addEventListener('click', initializeGame);
+
+ gameElements.nextQuestionButton.addEventListener('click', () => {
+ currentQuestion = (currentQuestion + 1) % questions.length;
+ loadQuestion();
+ updateUI();
+ });
+
+ initializeGame();
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a9de68f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,213 @@
+:root {
+ --primary-color: #2c3e50;
+ --secondary-color: #e74c3c;
+ --accent-color: #3498db;
+ --background-color: #ecf0f1;
+ --text-color: #2c3e50;
+ --border-radius: 8px;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--background-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ background: var(--primary-color);
+ color: white;
+ padding: 1rem;
+ text-align: center;
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 0.5rem;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+}
+
+.score-display {
+ font-size: 1.2rem;
+ font-weight: bold;
+}
+
+main {
+ flex: 1;
+ padding: 2rem;
+ max-width: 800px;
+ margin: 0 auto;
+ width: 100%;
+}
+
+.game-board {
+ background: white;
+ padding: 2rem;
+ border-radius: var(--border-radius);
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.question-panel {
+ text-align: center;
+ margin-bottom: 2rem;
+}
+
+.answers-remaining {
+ color: var(--accent-color);
+ font-weight: bold;
+}
+
+.answer-slots {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.answer-row {
+ display: grid;
+ grid-template-columns: 40px 1fr 60px;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.5rem;
+ background: #f8f9fa;
+ border-radius: var(--border-radius);
+ transition: transform 0.2s ease;
+}
+
+.answer-row:hover {
+ transform: translateX(5px);
+}
+
+.number {
+ background: var(--primary-color);
+ color: white;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ font-weight: bold;
+}
+
+.answer {
+ background: #e9ecef;
+ padding: 0.5rem;
+ border-radius: var(--border-radius);
+ text-align: center;
+}
+
+.answer.hidden {
+ background: var(--accent-color);
+ color: transparent;
+}
+
+.points {
+ font-weight: bold;
+ color: var(--secondary-color);
+}
+
+.input-area {
+ margin: 2rem 0;
+ display: flex;
+ gap: 1rem;
+}
+
+input[type="text"] {
+ flex: 1;
+ padding: 0.8rem;
+ border: 2px solid var(--primary-color);
+ border-radius: var(--border-radius);
+ font-size: 1rem;
+}
+
+button {
+ background: var(--accent-color);
+ color: white;
+ border: none;
+ padding: 0.8rem 1.5rem;
+ border-radius: var(--border-radius);
+ cursor: pointer;
+ font-weight: bold;
+ transition: background-color 0.2s ease;
+}
+
+button:hover {
+ background: #2980b9;
+}
+
+button:disabled {
+ background: #bdc3c7;
+ cursor: not-allowed;
+}
+
+.strikes {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.strike {
+ color: var(--secondary-color);
+ font-size: 2rem;
+ font-weight: bold;
+ opacity: 0.3;
+}
+
+.strike.active {
+ opacity: 1;
+}
+
+.controls {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin-top: 2rem;
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ background: var(--primary-color);
+ color: white;
+}
+
+@media (max-width: 600px) {
+ main {
+ padding: 1rem;
+ }
+
+ .game-board {
+ padding: 1rem;
+ }
+
+ .answer-row {
+ grid-template-columns: 30px 1fr 50px;
+ }
+
+ .number {
+ width: 30px;
+ height: 30px;
+ font-size: 0.9rem;
+ }
+
+ .input-area {
+ flex-direction: column;
+ }
+
+ button {
+ width: 100%;
+ }
+}