README.md
Changed around line 1
+ # 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
index.html
Changed around line 1
+
+
+
+
+
+
+
+ Family Quiz - Survey Guessing Game
+
+
+
+
+
Family Quiz
+
Score: 0
+
+
+
+
+
+
Name something people do before going to bed.
+
Answers remaining: 5
+
+
+
+
+
1
+
+
45
+
+
+
2
+
+
25
+
+
+
3
+
+
15
+
+
+
4
+
+
10
+
+
+
5
+
+
5
+
+
+
+
+
+
+
+
+
+ X
+ X
+ X
+
+
+
+
+
+
+
+
+
+
+
Made with love for quiz enthusiasts
+
+
+
+
script.js
Changed around line 1
+ 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();
+ });
style.css
Changed around line 1
+ :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%;
+ }
+ }