Spaces:

eaglelandsonce
/

Networking_Game

Running

App Files Files Community

eaglelandsonce commited on 9 days ago

Commit

c549c97

verified ·

1 Parent(s): f8950ea

Update index.html

Browse files

Files changed (1) hide show

index.html +92 -33

index.html CHANGED Viewed

@@ -6,36 +6,38 @@
   <style>
     /* General Styles */
     body {
-      font-family: Arial, sans-serif;
-      background: #f2f2f2;
       margin: 0;
       padding: 0;
     }
     .container {
-      max-width: 800px;
       margin: 50px auto;
       padding: 20px;
       background: #fff;
-      border-radius: 8px;
-      box-shadow: 0 0 10px rgba(0,0,0,0.1);
     }
     h1, h2 {
       text-align: center;
-      color: #333;
     }
     p {
       text-align: center;
     }
     .feedback {
       margin-top: 15px;
       text-align: center;
-      font-weight: bold;
-    }
-    .error {
-      color: red;
     }
     .success {
-      color: green;
     }
     button {
       display: block;
@@ -62,7 +64,8 @@
     .hidden {
       display: none;
     }
-    /* Persona Cards */
     .persona-list {
       display: flex;
       flex-wrap: wrap;
@@ -70,27 +73,59 @@
       margin: 20px 0;
     }
     .persona {
-      background: #e0f7fa;
-      border: 2px solid #4dd0e1;
-      border-radius: 8px;
-      width: 180px;
       padding: 15px;
       text-align: center;
-      cursor: pointer;
       margin: 10px;
       transition: transform 0.2s, background 0.2s;
     }
     .persona:hover {
-      transform: scale(1.05);
-      background: #b2ebf2;
     }
   </style>
 </head>
 <body>
   <div class="container">
     <h1>Networking Practice Game</h1>
-    <!-- Level 1: Locate the Mentor -->
     <div id="level1">
       <h2>Level 1: Find Your Mentor</h2>
       <p>Your purpose: <strong>Find a mentor</strong></p>
@@ -119,7 +154,13 @@
     <!-- 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 unique story.</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>
@@ -128,7 +169,9 @@
     <!-- 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>
@@ -136,7 +179,7 @@
   </div>
   <script>
-    // Level 1: Persona selection
     const personas = document.querySelectorAll('.persona');
     const level1Feedback = document.getElementById('level1Feedback');
     const level1Div = document.getElementById('level1');
@@ -149,19 +192,37 @@
           level1Feedback.textContent = "Correct! You've found the mentor.";
           level1Feedback.classList.remove('error');
           level1Feedback.classList.add('success');
-          // Move to Level 2 after a brief pause
           setTimeout(() => {
             level1Div.classList.add('hidden');
             level2Div.classList.remove('hidden');
-          }, 1000);
         } else {
-          level1Feedback.textContent = "That's not the right person. Please choose the mentor.";
           level1Feedback.classList.remove('success');
           level1Feedback.classList.add('error');
         }
       });
     });
     // Level 2: Conversation initiation
     const submitConversationBtn = document.getElementById('submitConversation');
     const conversationInput = document.getElementById('conversationInput');
@@ -170,24 +231,23 @@
     submitConversationBtn.addEventListener('click', () => {
       const text = conversationInput.value.trim();
-      // Basic validation: message should be long enough and include either a question or narrative trigger
       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("?") && !text.toLowerCase().includes("story")) {
-        level2Feedback.textContent = "Try to ask a question or share a unique story to engage the mentor.";
         level2Feedback.classList.remove('success');
         level2Feedback.classList.add('error');
       } else {
-        level2Feedback.textContent = "Great conversation starter! The mentor is engaged.";
         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');
-        }, 1000);
       }
     });
@@ -212,4 +272,3 @@
   </script>
 </body>
 </html>

   <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;
     .hidden {
       display: none;
     }
+    /* Duolingo-Like Persona Card Styles for Level 1 */
     .persona-list {
       display: flex;
       flex-wrap: wrap;
       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>
     <!-- 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>
     <!-- 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>
   <script>
+    // Level 1: Persona selection (Duolingo Style)
     const personas = document.querySelectorAll('.persona');
     const level1Feedback = document.getElementById('level1Feedback');
     const level1Div = document.getElementById('level1');
           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 = "&#10003;"; // 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');
     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);
       }
     });
   </script>
 </body>
 </html>