Spaces:

eaglelandsonce
/

Networking_Game

Running

App Files Files Community

eaglelandsonce commited on 10 days ago

Commit

f8950ea

verified ·

1 Parent(s): 36294d0

Update index.html

Browse files

Files changed (1) hide show

index.html +214 -18

index.html CHANGED Viewed

@@ -1,19 +1,215 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Networking Practice Game</title>
+  <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;
+      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;
+    }
+    /* Persona Cards */
+    .persona-list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      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>
+      <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 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>
+    </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
+    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');
+          // 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');
+    const level2Feedback = document.getElementById('level2Feedback');
+    const level3Div = document.getElementById('level3');
+    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);
+      }
+    });
+    // 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>