Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI User Type Calculator</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 10px 40px rgba(0,0,0,0.2); | |
| overflow: hidden; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| padding: 30px; | |
| text-align: center; | |
| } | |
| .header h1 { | |
| font-size: 28px; | |
| margin-bottom: 10px; | |
| } | |
| .header p { | |
| opacity: 0.9; | |
| font-size: 14px; | |
| } | |
| .content { | |
| padding: 30px; | |
| } | |
| .question-block { | |
| margin-bottom: 25px; | |
| padding: 20px; | |
| background: #f8f9fa; | |
| border-radius: 8px; | |
| border-left: 4px solid #667eea; | |
| } | |
| .question-header { | |
| display: flex; | |
| justify-content: flex-start; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| } | |
| .question-number { | |
| background: #667eea; | |
| color: white; | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| font-size: 14px; | |
| } | |
| .question-text { | |
| font-weight: 600; | |
| color: #2c3e50; | |
| margin-bottom: 15px; | |
| font-size: 15px; | |
| } | |
| .options { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .option { | |
| display: flex; | |
| align-items: center; | |
| padding: 12px 15px; | |
| background: white; | |
| border: 2px solid #dee2e6; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .option:hover { | |
| border-color: #667eea; | |
| background: #f0f3ff; | |
| } | |
| .option.selected { | |
| border-color: #667eea; | |
| background: #e8ecff; | |
| } | |
| .option input[type="radio"] { | |
| margin-right: 12px; | |
| width: 18px; | |
| height: 18px; | |
| cursor: pointer; | |
| } | |
| .option-label { | |
| flex: 1; | |
| font-size: 14px; | |
| color: #495057; | |
| cursor: pointer; | |
| } | |
| .results { | |
| margin-top: 30px; | |
| padding: 25px; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| border-radius: 8px; | |
| color: white; | |
| } | |
| .results h2 { | |
| font-size: 22px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .stat-card { | |
| background: rgba(255,255,255,0.15); | |
| padding: 15px; | |
| border-radius: 6px; | |
| backdrop-filter: blur(10px); | |
| } | |
| .stat-label { | |
| font-size: 12px; | |
| opacity: 0.9; | |
| margin-bottom: 5px; | |
| } | |
| .stat-value { | |
| font-size: 24px; | |
| font-weight: bold; | |
| } | |
| .final-result { | |
| background: white; | |
| color: #2c3e50; | |
| padding: 20px; | |
| border-radius: 6px; | |
| text-align: center; | |
| margin-top: 20px; | |
| } | |
| .type-name { | |
| font-size: 48px; | |
| font-weight: 700; | |
| color: #2c3e50; | |
| } | |
| .deuce-indicator { | |
| display: inline-block; | |
| background: #ffc107; | |
| color: #000; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| margin-left: 10px; | |
| } | |
| .export-btn { | |
| margin-top: 20px; | |
| padding: 12px 30px; | |
| background: white; | |
| color: #667eea; | |
| border: none; | |
| border-radius: 6px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| font-size: 14px; | |
| transition: all 0.3s; | |
| } | |
| .export-btn:hover { | |
| background: #f0f3ff; | |
| transform: translateY(-2px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>Discover Your AI Archetype: An Expedition into Tomorrow</h1> | |
| <p>The world of AI is a vast, uncharted continent brimming with risk and reward. Every great expedition requires different roles to succeed. Are you the one who draws the maps, the one who builds the bridges, or the one who settles the new frontier?</p> | |
| <p style="margin-top: 10px; font-style: italic;">This quiz will reveal your unique archetype in the grand expedition of Artificial Intelligence. For each question, choose the answer that best reflects your spirit and approach.</p> | |
| </div> | |
| <div class="content"> | |
| <div class="question-block"> | |
| <div class="question-header"> | |
| <div class="question-number">1</div> | |
| </div> | |
| <div class="question-text">My primary orientation toward AI is...</div> | |
| <div class="options"> | |
| <label class="option"> | |
| <input type="radio" name="q1" value="A"> | |
| <span class="option-label">To ask "what if?" and explore the horizon.</span> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q1" value="B"> | |
| <span class="option-label">To ask "how?" and assemble the moving parts.</span> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q1" value="C"> | |
| <span class="option-label">To ask "what for?" and apply it to a current need.</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="question-block"> | |
| <div class="question-header"> | |
| <div class="question-number">2</div> | |
| </div> | |
| <div class="question-text">My day-to-day engagement with AI feels most like...</div> | |
| <div class="options"> | |
| <label class="option"> | |
| <input type="radio" name="q2" value="A"> | |
| <span class="option-label">Exploring abstract concepts and future-focused ideas.</span> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q2" value="B"> | |
| <span class="option-label">Working within complex systems and technical specifications.</span> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q2" value="C"> | |
| <span class="option-label">Focusing on practical tasks and immediate outputs.</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="question-block"> | |
| <div class="question-header"> | |
| <div class="question-number">3</div> | |
| </div> | |
| <div class="question-text">I consider an AI project a success when...</div> | |
| <div class="options"> | |
| <label class="option"> | |
| <input type="radio" name="q3" value="A"> | |
| <span class="option-label">It fundamentally changes our perspective on a problem.</span> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q3" value="B"> | |
| <span class="option-label">It performs its intended function reliably for many users.</span> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q3" value="C"> | |
| <span class="option-label">It delivers a clear and immediate improvement.</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="question-block"> | |
| <div class="question-header"> | |
| <div class="question-number">4</div> | |
| </div> | |
| <div class="question-text">What is your typical project mindset?</div> | |
| <div class="options"> | |
| <label class="option"> | |
| <input type="radio" name="q4" value="A"> | |
| <span class="option-label">Focusing on a long-term vision, even if the path is unclear.</span> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q4" value="B"> | |
| <span class="option-label">Focusing on a defined project scope with a clear start and end.</span> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q4" value="C"> | |
| <span class="option-label">Focusing on the immediate task at hand and its direct outcome.</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="question-block"> | |
| <div class="question-header"> | |
| <div class="question-number">5</div> | |
| </div> | |
| <div class="question-text">The primary result of my work with AI is typically...</div> | |
| <div class="options"> | |
| <label class="option"> | |
| <input type="radio" name="q5" value="A"> | |
| <span class="option-label">A new insight, theory, or strategic direction.</span> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q5" value="B"> | |
| <span class="option-label">A tangible product or a working system.</span> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q5" value="C"> | |
| <span class="option-label">An answer, a finished piece of work, or an optimized process.</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div id="results" class="results" style="display: none;"> | |
| <h2>Your AI Archetype</h2> | |
| <div class="final-result"> | |
| <div class="type-name" id="typeName">Complete the questionnaire</div> | |
| <div id="deuceIndicator"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const weights = [5, 4, 3, 2, 1]; | |
| const categories = { | |
| 'A': 'Pink!', | |
| 'B': 'Green!', | |
| 'C': 'Yellow!' | |
| }; | |
| const categoryColors = { | |
| 'A': '#ff1493', | |
| 'B': '#00c853', | |
| 'C': '#ffd700' | |
| }; | |
| function calculate() { | |
| const answers = []; | |
| for (let i = 1; i <= 5; i++) { | |
| const selected = document.querySelector(`input[name="q${i}"]:checked`); | |
| if (selected) { | |
| answers.push(selected.value); | |
| } | |
| } | |
| if (answers.length !== 5) { | |
| document.getElementById('results').style.display = 'none'; | |
| return; | |
| } | |
| // Count raw occurrences | |
| const counts = { 'A': 0, 'B': 0, 'C': 0 }; | |
| answers.forEach(ans => counts[ans]++); | |
| // Calculate weighted scores | |
| const scores = { 'A': 0, 'B': 0, 'C': 0 }; | |
| answers.forEach((ans, i) => { | |
| scores[ans] += weights[i]; | |
| }); | |
| // Determine category | |
| let category; | |
| let isDeuce = false; | |
| // Check for 3+ majority | |
| if (counts['A'] >= 3) { | |
| category = 'A'; | |
| } else if (counts['B'] >= 3) { | |
| category = 'B'; | |
| } else if (counts['C'] >= 3) { | |
| category = 'C'; | |
| } else { | |
| isDeuce = true; | |
| const maxScore = Math.max(scores['A'], scores['B'], scores['C']); | |
| const tied = Object.keys(scores).filter(k => scores[k] === maxScore); | |
| if (tied.length === 1) { | |
| category = tied[0]; | |
| } else { | |
| // Perfect tie - use earliest question | |
| for (let ans of answers) { | |
| if (tied.includes(ans)) { | |
| category = ans; | |
| break; | |
| } | |
| } | |
| } | |
| } | |
| // Display results | |
| const resultText = `You're a "${categories[category]}"`; | |
| document.getElementById('typeName').textContent = resultText; | |
| document.getElementById('typeName').style.color = categoryColors[category]; | |
| document.getElementById('deuceIndicator').innerHTML = ''; | |
| document.getElementById('results').style.display = 'block'; | |
| } | |
| // Add event listeners | |
| document.querySelectorAll('input[type="radio"]').forEach(radio => { | |
| radio.addEventListener('change', function() { | |
| // Visual feedback | |
| document.querySelectorAll(`input[name="${this.name}"]`).forEach(r => { | |
| r.closest('.option').classList.remove('selected'); | |
| }); | |
| this.closest('.option').classList.add('selected'); | |
| calculate(); | |
| }); | |
| }); | |
| // Option click handling | |
| document.querySelectorAll('.option').forEach(option => { | |
| option.addEventListener('click', function(e) { | |
| if (e.target.tagName !== 'INPUT') { | |
| this.querySelector('input').click(); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |