Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Networking Practice Game</title> | |
| <style> | |
| /* General Styles */ | |
| body { | |
| font-family: 'Comic Sans MS', cursive, sans-serif; | |
| background: #f7f9fc; | |
| margin: 0; | |
| padding: 0; | |
| color: #333; | |
| } | |
| .container { | |
| max-width: 600px; | |
| margin: 50px auto; | |
| padding: 20px; | |
| background: #fff; | |
| border-radius: 10px; | |
| box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); | |
| } | |
| h1, h2 { | |
| text-align: center; | |
| color: #2d3436; | |
| } | |
| p { | |
| text-align: center; | |
| font-size: 18px; | |
| } | |
| .feedback { | |
| margin-top: 15px; | |
| text-align: center; | |
| font-size: 18px; | |
| } | |
| .success { | |
| color: #00b894; | |
| } | |
| .error { | |
| color: #d63031; | |
| } | |
| button { | |
| display: block; | |
| margin: 20px auto; | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| border: none; | |
| background: #4dd0e1; | |
| color: #fff; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background: #26c6da; | |
| } | |
| input[type="text"], textarea { | |
| width: 100%; | |
| padding: 10px; | |
| margin: 10px 0; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| /* Duolingo-Like Persona Card Styles for Level 1 */ | |
| .persona-list { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| margin: 20px 0; | |
| } | |
| .persona { | |
| background: #81ecec; | |
| border: 3px solid #00cec9; | |
| border-radius: 10px; | |
| width: 130px; | |
| padding: 15px; | |
| text-align: center; | |
| margin: 10px; | |
| transition: transform 0.2s, background 0.2s; | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .persona:hover { | |
| transform: scale(1.1); | |
| background: #74b9ff; | |
| } | |
| /* Check Mark Animation for Level 1 */ | |
| .checkmark { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| background: #00b894; | |
| color: #fff; | |
| border-radius: 50%; | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| animation: pop 0.5s ease-out; | |
| opacity: 0; | |
| } | |
| @keyframes pop { | |
| 0% { | |
| transform: scale(0); | |
| opacity: 0; | |
| } | |
| 70% { | |
| transform: scale(1.2); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Networking Practice Game</h1> | |
| <!-- Level 1: Locate the Mentor (Duolingo Style) --> | |
| <div id="level1"> | |
| <h2>Level 1: Find Your Mentor</h2> | |
| <p>Your purpose: <strong>Find a mentor</strong></p> | |
| <p>Select the person that fits this purpose:</p> | |
| <div class="persona-list"> | |
| <div class="persona" data-role="mentor"> | |
| <h3>Mentor</h3> | |
| <p>An experienced guide who can offer wisdom.</p> | |
| </div> | |
| <div class="persona" data-role="job"> | |
| <h3>Job Opportunity</h3> | |
| <p>Someone who might help you get a job.</p> | |
| </div> | |
| <div class="persona" data-role="sales"> | |
| <h3>Sales Contact</h3> | |
| <p>Someone who might help you make a sale.</p> | |
| </div> | |
| <div class="persona" data-role="filler"> | |
| <h3>Fun Filler</h3> | |
| <p>Fun to talk to, but not directly helpful.</p> | |
| </div> | |
| </div> | |
| <div id="level1Feedback" class="feedback"></div> | |
| </div> | |
| <!-- Level 2: Initiate Conversation --> | |
| <div id="level2" class="hidden"> | |
| <h2>Level 2: Initiate a Meaningful Conversation</h2> | |
| <p> | |
| Now that you've identified the mentor, start a conversation by asking an interesting question or sharing a personal story. | |
| </p> | |
| <p> | |
| <em>Success Criteria:</em> Your message should be at least 20 characters long and either include a question (a "?" symbol) or contain a storytelling indicator | |
| such as words like "story", "once", "experience", "anecdote", "interesting", or "remember". | |
| </p> | |
| <textarea id="conversationInput" rows="4" placeholder="Type your conversation starter here..."></textarea> | |
| <button id="submitConversation">Send Message</button> | |
| <div id="level2Feedback" class="feedback"></div> | |
| </div> | |
| <!-- Level 3: Follow-Up Challenge --> | |
| <div id="level3" class="hidden"> | |
| <h2>Level 3: Follow-Up Challenge</h2> | |
| <p> | |
| Recall a specific detail the mentor mentioned during your conversation. For example, the mentor mentioned they love <strong>sailing</strong>. What was it? | |
| </p> | |
| <input type="text" id="followUpInput" placeholder="Enter the detail here..."> | |
| <button id="submitFollowUp">Submit Follow-Up</button> | |
| <div id="level3Feedback" class="feedback"></div> | |
| </div> | |
| </div> | |
| <script> | |
| // Level 1: Persona selection (Duolingo Style) | |
| const personas = document.querySelectorAll('.persona'); | |
| const level1Feedback = document.getElementById('level1Feedback'); | |
| const level1Div = document.getElementById('level1'); | |
| const level2Div = document.getElementById('level2'); | |
| personas.forEach(persona => { | |
| persona.addEventListener('click', () => { | |
| const role = persona.getAttribute('data-role'); | |
| if (role === 'mentor') { | |
| level1Feedback.textContent = "Correct! You've found the mentor."; | |
| level1Feedback.classList.remove('error'); | |
| level1Feedback.classList.add('success'); | |
| // Add a checkmark icon to the correct card | |
| const check = document.createElement('div'); | |
| check.classList.add('checkmark'); | |
| check.innerHTML = "✓"; // Unicode checkmark | |
| persona.appendChild(check); | |
| // Trigger animation by ensuring the checkmark becomes visible | |
| setTimeout(() => { | |
| check.style.opacity = "1"; | |
| }, 50); | |
| // After a short delay, progress to Level 2 | |
| setTimeout(() => { | |
| level1Div.classList.add('hidden'); | |
| level2Div.classList.remove('hidden'); | |
| }, 1500); | |
| } else { | |
| level1Feedback.textContent = "Oops! That's not the right person. Try again!"; | |
| level1Feedback.classList.remove('success'); | |
| level1Feedback.classList.add('error'); | |
| } | |
| }); | |
| }); | |
| // Helper function to check for storytelling keywords | |
| function containsStoryKeywords(text) { | |
| const keywords = ["story", "once", "experience", "anecdote", "interesting", "remember"]; | |
| return keywords.some(keyword => text.toLowerCase().includes(keyword)); | |
| } | |
| // Level 2: Conversation initiation | |
| const submitConversationBtn = document.getElementById('submitConversation'); | |
| const conversationInput = document.getElementById('conversationInput'); | |
| const level2Feedback = document.getElementById('level2Feedback'); | |
| const level3Div = document.getElementById('level3'); | |
| submitConversationBtn.addEventListener('click', () => { | |
| const text = conversationInput.value.trim(); | |
| if (text.length < 20) { | |
| level2Feedback.textContent = "Your message is too short. Please provide more detail."; | |
| level2Feedback.classList.remove('success'); | |
| level2Feedback.classList.add('error'); | |
| } else if (!text.includes("?") && !containsStoryKeywords(text)) { | |
| level2Feedback.textContent = "Your message needs to ask a question or include a personal story. For example, 'I once experienced...' or 'What was it like when...?'."; | |
| level2Feedback.classList.remove('success'); | |
| level2Feedback.classList.add('error'); | |
| } else { | |
| level2Feedback.textContent = "Great job! Your conversation starter feels engaging and natural."; | |
| level2Feedback.classList.remove('error'); | |
| level2Feedback.classList.add('success'); | |
| // Proceed to Level 3 after a short delay | |
| setTimeout(() => { | |
| document.getElementById('level2').classList.add('hidden'); | |
| level3Div.classList.remove('hidden'); | |
| }, 1500); | |
| } | |
| }); | |
| // Level 3: Follow-up challenge | |
| const submitFollowUpBtn = document.getElementById('submitFollowUp'); | |
| const followUpInput = document.getElementById('followUpInput'); | |
| const level3Feedback = document.getElementById('level3Feedback'); | |
| const expectedDetail = "sailing"; // The detail that the mentor mentioned | |
| submitFollowUpBtn.addEventListener('click', () => { | |
| const answer = followUpInput.value.trim().toLowerCase(); | |
| if (answer.includes(expectedDetail)) { | |
| level3Feedback.textContent = "Excellent! You've recalled the detail and can follow up effectively."; | |
| level3Feedback.classList.remove('error'); | |
| level3Feedback.classList.add('success'); | |
| } else { | |
| level3Feedback.textContent = "That's not quite right. Remember, the mentor mentioned they love sailing."; | |
| level3Feedback.classList.remove('success'); | |
| level3Feedback.classList.add('error'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |