Path of Purpose: CFG Career Quest

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<set $totalPower = $strength + $financial + $networking + $careerReadiness + $techSkills>> <<if $extraItems["Mock Interview"]>> <<set $totalPower += 10>> <</if>> <<if $extraItems["Resume Review"]>> <<set $totalPower += 8>> <</if>> <<if $extraItems["Mentorship Boost"]>> <<set $totalPower += 12>> <</if>> <<set $playerAttack = Math.max(5, Math.floor($totalPower / 5))>>  <<set $monsterAttack = 12>>

<div id="career-container"> <h2>🎓 Career Preparation Hub</h2> <p class="intro-text">Welcome to your career preparation journey! Complete these mini-games to unlock essential career skills and tools.</p> <div class="minigame-selection"> <div class="minigame-card" onclick="startSkillsGame()"> <div class="card-icon">📚</div><h3>Career Skills Quest</h3><p>Explore CFG courses and unlock your potential!</p> <div class="progress-bar"> <div class="progress-fill" id="skills-progress" style="width: 0%"></div> </div><span class="progress-text" id="skills-text">0/5 Skills Unlocked</span> </div> <div class="minigame-card" onclick="startToolsGame()"> <div class="card-icon">🛠️</div><h3>Career Tools Challenge</h3><p>Master NUS career preparation tools and applications!</p> <div class="progress-bar"> <div class="progress-fill" id="tools-progress" style="width: 0%"></div> </div> <span class="progress-text" id="tools-text">0/4 Tools Mastered</span> </div> </div> <div id="skills-game" class="minigame-container" style="display: none;"> <h3>🎯 Career Skills Quest</h3> <p class="game-intro">Match the career challenges with the right CFG courses and programmes!</p><div class="challenge-card"><h4 id="challenge-title">Loading...</h4> <p id="challenge-description">Loading challenge...</p> <div class="options-grid"> <div class="option-card" onclick="selectSkillOption(0)"><span id="skill-option-0">Option 1</span></div><div class="option-card" onclick="selectSkillOption(1)"><span id="skill-option-1">Option 2</span></div><div class="option-card" onclick="selectSkillOption(2)"><span id="skill-option-2">Option 3</span></div></div> <div id="skills-next-container" style="display: none;"> <button onclick="nextSkillChallenge()" class="next-btn">Next Challenge →</button> </div> </div> <div id="skills-feedback" class="feedback-area"></div> <div class="game-controls"> <button onclick="closeGame()" class="back-btn">← Back to Hub</button> <div class="score">Score: <span id="skills-score">0</span>/5</div> </div> </div> <div id="tools-game" class="minigame-container" style="display: none;"><h3>🔧 Career Tools Challenge</h3><p class="game-intro">Drag and drop the right tools for each career preparation task!</p><div class="scenario-card"> <h4 id="scenario-title">Loading...</h4><p id="scenario-description">Loading scenario...</p> <div class="drop-zone" id="drop-zone"><span class="drop-hint">Drag the correct tool here</span></div><div class="tools-container"> <div class="tool-item" draggable="true" data-tool="talentconnect"> <div class="tool-icon"><img src="talentconnect.png" alt="vMock Icon" style="width: 2.5em; height: auto;"></div><span>NUS TalentConnect</span> </div> <div class="tool-item" draggable="true" data-tool="vmock"> <div class="tool-icon"><img src="vmock.png" alt="vMock Icon" style="width: 2.5em; height: auto;"></div><span>VMock</span> </div> <div class="tool-item" draggable="true" data-tool="cfg"> <div class="tool-icon" ><img src="careeradvisory.png" alt="vMock Icon" style="width: 1.9em; height: auto;"></div><span>CFG Career Advisory Services</span> </div> <div class="tool-item" draggable="true" data-tool="careerplus"> <div class="tool-icon"> <img src="careerplus.png" alt="Career+ Icon" style="width: 1.2em; height: 1.2em;"></div><span>NUS career+</span> </div> </div> <div id="tools-feedback" class="feedback-area"></div> <div id="tools-next-container" style="display: none;"> <button onclick="nextToolScenario()" class="next-btn">Next Challenge →</button> </div> </div> <div class="game-controls"> <button onclick="closeGame()" class="back-btn">← Back to Hub</button> <div class="score">Score: <span id="tools-score">0</span>/4</div> </div> </div> <div id="completion-section" class="completion-container" style="display: none;"> <h3>🚀 Career Preparation Complete!</h3> <p>You've mastered both career skills and tools! You're now ready to take on the professional world.</p> <div class="completion-stats"> <div class="stat-item"> <div class="stat-number">9</div> <div class="stat-label">Skills & Tools Mastered</div> </div> <div class="stat-item"> <div class="stat-number">100%</div> <div class="stat-label">Preparation Complete</div> </div> </div> <div class="back-to-trials-btn"> <button onclick="returnToTrials()" class="return-btn">🏭 Return to Industry Trials</button> </div> </div> </div> <style> #career-container { max-width: 900px; margin: 0 auto; padding: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; color: white; box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .intro-text { text-align: center; font-size: 1.2em; margin-bottom: 30px; opacity: 0.9; } .minigame-selection { display: flex; gap: 25px; margin-bottom: 30px; justify-content: center; } .minigame-card { background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.3); border-radius: 20px; padding: 25px; width: 300px; text-align: center; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); position: relative; overflow: hidden; } .minigame-card::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, transparent, rgba(255,255,255,0.6), transparent); border-radius: 20px; opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .minigame-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.3); background: rgba(255,255,255,0.25); } .minigame-card:hover::before { opacity: 1; } .minigame-card.pulse-animate { animation: cardPulse 2s ease-in-out infinite; } .minigame-card.pulse-animate::before { animation: borderGlow 2s ease-in-out infinite; } .card-icon { font-size: 3em; margin-bottom: 15px; } .progress-bar { background: rgba(255,255,255,0.2); height: 8px; border-radius: 4px; margin: 15px 0 10px; overflow: hidden; } .progress-fill { background: linear-gradient(90deg, #4CAF50, #8BC34A); height: 100%; transition: width 0.5s ease; } .progress-text { font-size: 0.9em; opacity: 0.8; } .minigame-container { background: rgba(255,255,255,0.1); border-radius: 20px; padding: 30px; } .challenge-card, .scenario-card { background: rgba(255,255,255,0.1); border-radius: 15px; padding: 25px; margin-bottom: 20px; } .feedback-area { min-height: 60px; background: rgba(255,255,255,0.1); border-radius: 10px; padding: 15px; margin: 15px 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.1em; transition: all 0.3s ease; } .feedback-area.success { background: rgba(76, 175, 80, 0.3); border: 2px solid #4CAF50; color: #4CAF50; } .feedback-area.error { background: rgba(244, 67, 54, 0.3); border: 2px solid #f44336; color: #f44336; } .feedback-area.explanation { background: rgba(33, 150, 243, 0.3); border: 2px solid #2196F3; color: #87CEEB; color:white; text-align: left; } .options-grid { display: flex; gap: 15px; margin-top: 20px; } .option-card { background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.3); border-radius: 10px; padding: 15px; flex: 1; cursor: pointer; transition: all 0.3s ease; text-align: center; } .option-card:hover { background: rgba(255,255,255,0.3); transform: translateY(-2px); } .option-card.correct { background: rgba(76, 175, 80, 0.3); border-color: #4CAF50; animation: pulse 0.5s; } .option-card.incorrect { background: rgba(244, 67, 54, 0.3); border-color: #f44336; animation: shake 0.5s; } .option-card.disabled { pointer-events: none; opacity: 0.6; } .drop-zone { background: rgba(255,255,255,0.1); border: 3px dashed rgba(255,255,255,0.5); border-radius: 15px; padding: 40px; text-align: center; margin: 20px 0; transition: all 0.3s ease; height: 10px; display: flex; align-items: center; justify-content: center; } .drop-zone.drag-over { background: rgba(76, 175, 80, 0.2); border-color: #4CAF50; } .drop-zone.success { background: rgba(76, 175, 80, 0.3); border-color: #4CAF50; color: #4CAF50; } .drop-zone.error { background: rgba(244, 67, 54, 0.3); border-color: #f44336; color: #f44336; } .tools-container { display: flex; gap: 15px; justify-content: center; margin-top: 20px; } .tool-item { background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.3); border-radius: 10px; padding: 0px; cursor: grab; transition: all 0.3s ease; text-align: center; width: 150px; height:140px; } .tool-item:active { cursor: grabbing; } .tool-item:hover { background: rgba(255,255,255,0.3); transform: translateY(-2px); } .tool-icon { font-size: 2em; } .game-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; } .back-btn, .return-btn, .next-btn { background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.3); color: white; padding: 10px 20px; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; font-size: 1em; } .back-btn:hover, .return-btn:hover, .next-btn:hover { background: rgba(255,255,255,0.3); transform: translateY(-2px); } .next-btn { background: rgba(76, 175, 80, 0.3); border-color: #4CAF50; margin-top: 15px; } .score { font-size: 1.2em; font-weight: bold; } .completion-container { text-align: center; background: rgba(255,255,255,0.15); padding: 40px; border-radius: 20px; border: 3px solid #FFD700; animation: glow 2s ease-in-out infinite alternate; } .completion-stats { display: flex; gap: 30px; justify-content: center; margin: 30px 0; } .stat-item { text-align: center; } .stat-number { font-size: 3em; font-weight: bold; color: #FFD700; } .stat-label { font-size: 1.1em; opacity: 0.9; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } @keyframes glow { 0% { box-shadow: 0 0 20px rgba(255,215,0,0.3); } 100% { box-shadow: 0 0 40px rgba(255,215,0,0.6); } } @keyframes cardPulse { 0% { transform: scale(1); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } 50% { transform: scale(1.03); box-shadow: 0 10px 25px rgba(0,0,0,0.4); background: rgba(255,255,255,0.25); } 100% { transform: scale(1); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } } @keyframes borderGlow { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @media (max-width: 768px) { .minigame-selection { flex-direction: column; align-items: center; } .options-grid { flex-direction: column; } .tools-container { flex-wrap: wrap; } .completion-stats { flex-direction: column; gap: 20px; } } </style> <script> (function() { 'use strict'; // Prevent multiple initializations if (window.careerPrepInitialized) { return; } window.careerPrepInitialized = true; // Game Data const skillsChallenges = [ { title: "Communication Skills Challenge", description: "You need to improve your presentation and communication skills for client meetings.", options: ["Personal Branding Workshop", "CommsLab Public Speaking (CFG1600)", "Technical Writing Course"], correct: 1, explanation: "CommsLab Public Speaking (CFG1600) imparts public speaking skills training to students to improve their oral communication skills through a blended learning approach where students will learn essential frameworks required to craft and deliver a pitch." }, { title: "Leadership Development", description: "You want to develop leadership skills to advance to a management position.", options: ["Data Analytics Course", "Heart of Leadership Programme", "Digital Marketing Workshop"], correct: 1, explanation: "Delivered in an interactive format, the Heart of Leadership programme comprises a series of four compulsory workshops, and deep dives into the core ingredients for effective leadership, equipping participants with the skills and attributes to create lasting impact." }, { title: "Industry Transition", description: "You are pivoting engineering to finance and want to find out more about the industry.", options: ["Career Booster Workshops", "Coding Bootcamp", "Design Thinking Workshop"], correct: 0, explanation: "Built around 3 key themes of advanced interviewing/ assessment skills, industry horizons, and life skills at the workplace, Career Booster workshops equip students to navigate the hiring process and successfully transition into the workplace. " }, { title: "Networking & Personal Brand", description: "You need to build professional networks and enhance your personal brand.", options: ["Technical Certification", "CFG Services for Networking & Branding", "Project Management Course"], correct: 1, explanation: "CFG offers multiple workshops, coaching sessions, and events like NUS Career Fest to help students develop their personal brand and build valuable industry networks." }, { title: "Advanced Career Preparation and Workplace Skills", description: "You are in your final years of university and need strategic career planning.", options: ["Career Advancement (CFG3001) Course", "Software Development", "Marketing Analytics"], correct: 0, explanation: "The Career Advancement (CFG3001) e-course equips students in the final lap of university life with advanced career preparation and workplace skills, empowering them to confidently navigate the job search process and excel in their first graduate job." } ]; const toolsScenarios = [ { title: "Resume Optimization", description: "You need to improve your resume to pass Applicant Tracking System (ATS) systems and impress recruiters.", correctTool: "vmock", explanation: "VMock provides AI-powered resume analysis and optimization, helping you create ATS-friendly resumes with instant feedback and suggestions for improvement. Also through credit-bearing courses like CFG1002, learn how to leverage VMock effectively to strengthen your resume and boost your job readiness." }, { title: "Job Search & Applications", description: "You're looking for internships and job opportunities in your field.", correctTool: "talentconnect", explanation: "NUS TalentConnect is the University’s dedicated job portal, providing direct access to employers and exclusive job opportunities to help you discover positions relevant to your area of expertise." }, { title: "Skills Development & Training", description: "You want to build a customised skills profile, identify skills gaps, and strategically develop planning and organisational skills by creating a career roadmap.", correctTool: "careerplus", explanation: "Unlock a world of possibilities tailored to your unique interests and strengths with the NUS career+ app. Align your expertise with your career aspirations and discover avenues for growth and development, with taliored recommendations that can help you enhance your skillsets." }, { title: "Career Guidance & Counseling", description: "You need personalised career advice and guidance from professionals.", correctTool: "cfg", explanation: "CFG Career Advisors can support you in a variety of ways, such as providing career consultations, resume critique, mock interviews as well as internship and networking advisory." } ]; // Game State let skillsScore = 0; let toolsScore = 0; let currentSkillChallenge = 0; let currentToolScenario = 0; let skillsAnswered = false; let toolsAnswered = false; let dragListenersAdded = false; // Animation State let pulseTimeout; // Reset game state function function resetGameState() { skillsScore = 0; toolsScore = 0; currentSkillChallenge = 0; currentToolScenario = 0; skillsAnswered = false; toolsAnswered = false; updateSkillsProgress(); updateToolsProgress(); } // Start pulsing animation after 3 seconds function startPulseAnimation() { clearTimeout(pulseTimeout); pulseTimeout = setTimeout(() => { const cards = document.querySelectorAll('.minigame-card'); cards.forEach(card => { card.classList.add('pulse-animate'); }); }, 3000); } // Stop pulsing animation function stopPulseAnimation() { clearTimeout(pulseTimeout); const cards = document.querySelectorAll('.minigame-card'); cards.forEach(card => { card.classList.remove('pulse-animate'); }); } // Skills Game Functions window.startSkillsGame = function() { stopPulseAnimation(); document.querySelector('.minigame-selection').style.display = 'none'; document.getElementById('skills-game').style.display = 'block'; currentSkillChallenge = 0; skillsScore = 0; document.getElementById('skills-score').textContent = skillsScore; loadSkillChallenge(); }; function loadSkillChallenge() { if (currentSkillChallenge >= skillsChallenges.length) { updateSkillsProgress(); closeGame(); return; } const challenge = skillsChallenges[currentSkillChallenge]; document.getElementById('challenge-title').textContent = challenge.title; document.getElementById('challenge-description').textContent = challenge.description; document.getElementById('skills-feedback').textContent = ''; document.getElementById('skills-feedback').className = 'feedback-area'; document.getElementById('skills-next-container').style.display = 'none'; skillsAnswered = false; for (let i = 0; i < 3; i++) { document.getElementById(`skill-option-${i}`).textContent = challenge.options[i]; const optionElement = document.querySelector(`[onclick="selectSkillOption(${i})"]`); optionElement.className = 'option-card'; } } window.selectSkillOption = function(option) { if (skillsAnswered) return; const challenge = skillsChallenges[currentSkillChallenge]; const isCorrect = option === challenge.correct; const feedbackArea = document.getElementById('skills-feedback'); // Visual feedback on selected option document.querySelector(`[onclick="selectSkillOption(${option})"]`).className = isCorrect ? 'option-card correct' : 'option-card incorrect'; if (isCorrect) { skillsScore++; document.getElementById('skills-score').textContent = skillsScore; feedbackArea.textContent = '✓ Correct! ' + challenge.explanation; feedbackArea.className = 'feedback-area explanation'; skillsAnswered = true; // Show next button document.getElementById('skills-next-container').style.display = 'block'; // Disable all options for (let i = 0; i < 3; i++) { document.querySelector(`[onclick="selectSkillOption(${i})"]`).classList.add('disabled'); } } else { feedbackArea.textContent = '✗ Not quite right. Try again! Think about what specific skill area this challenge is addressing.'; feedbackArea.className = 'feedback-area error'; // Reset the incorrect option after animation setTimeout(() => { document.querySelector(`[onclick="selectSkillOption(${option})"]`).className = 'option-card'; }, 1000); } }; window.nextSkillChallenge = function() { currentSkillChallenge++; loadSkillChallenge(); }; // Tools Game Functions window.startToolsGame = function() { stopPulseAnimation(); document.querySelector('.minigame-selection').style.display = 'none'; document.getElementById('tools-game').style.display = 'block'; currentToolScenario = 0; toolsScore = 0; document.getElementById('tools-score').textContent = toolsScore; setupDragAndDrop(); loadToolScenario(); }; function loadToolScenario() { if (currentToolScenario >= toolsScenarios.length) { updateToolsProgress(); closeGame(); return; } const scenario = toolsScenarios[currentToolScenario]; document.getElementById('scenario-title').textContent = scenario.title; document.getElementById('scenario-description').textContent = scenario.description; document.getElementById('tools-feedback').textContent = ''; document.getElementById('tools-feedback').className = 'feedback-area'; document.getElementById('tools-next-container').style.display = 'none'; toolsAnswered = false; // Reset drop zone const dropZone = document.getElementById('drop-zone'); dropZone.innerHTML = '<span class="drop-hint">Drag the correct tool here</span>'; dropZone.className = 'drop-zone'; } function setupDragAndDrop() { if (dragListenersAdded) return; dragListenersAdded = true; const tools = document.querySelectorAll('.tool-item'); const dropZone = document.getElementById('drop-zone'); tools.forEach(tool => { tool.addEventListener('dragstart', (e) => { if (toolsAnswered) { e.preventDefault(); return; } e.dataTransfer.setData('text/plain', tool.dataset.tool); }); }); dropZone.addEventListener('dragover', (e) => { if (toolsAnswered) return; e.preventDefault(); dropZone.classList.add('drag-over'); }); dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('drag-over'); }); dropZone.addEventListener('drop', (e) => { if (toolsAnswered) return; e.preventDefault(); dropZone.classList.remove('drag-over'); const droppedTool = e.dataTransfer.getData('text/plain'); const scenario = toolsScenarios[currentToolScenario]; const isCorrect = droppedTool === scenario.correctTool; const feedbackArea = document.getElementById('tools-feedback'); if (isCorrect) { toolsScore++; document.getElementById('tools-score').textContent = toolsScore; dropZone.innerHTML = '<span style="color: #388E3C; font-size: 1.5em; font-weight: bold; text-shadow: 1px 1px 2px #000;">✓ Correct!</span>'; dropZone.className = 'drop-zone success'; feedbackArea.textContent = scenario.explanation; feedbackArea.className = 'feedback-area explanation'; toolsAnswered = true; // Show next button document.getElementById('tools-next-container').style.display = 'block'; } else { dropZone.innerHTML = '<span style="color: #f44336; font-size: 1.2em;">✗ Not the right tool</span>'; dropZone.className = 'drop-zone error'; feedbackArea.textContent = 'Try again! Think about what this specific task requires and which tool would be most helpful.'; feedbackArea.className = 'feedback-area error'; // Reset drop zone after delay setTimeout(() => { dropZone.innerHTML = '<span class="drop-hint">Drag the correct tool here</span>'; dropZone.className = 'drop-zone'; }, 2000); } }); } window.nextToolScenario = function() { currentToolScenario++; loadToolScenario(); }; function closeGame() { document.getElementById('skills-game').style.display = 'none'; document.getElementById('tools-game').style.display = 'none'; document.querySelector('.minigame-selection').style.display = 'flex'; // Restart pulse animation when returning to hub startPulseAnimation(); // Check if both games are completed if (skillsScore === 5 && toolsScore === 4) { stopPulseAnimation(); document.querySelector('.minigame-selection').style.display = 'none'; document.getElementById('completion-section').style.display = 'block'; } } window.closeGame = closeGame; function updateSkillsProgress() { const percentage = (skillsScore / 5) * 100; const progressEl = document.getElementById('skills-progress'); const textEl = document.getElementById('skills-text'); if (progressEl) progressEl.style.width = percentage + '%'; if (textEl) textEl.textContent = `${skillsScore}/5 Skills Unlocked`; } function updateToolsProgress() { const percentage = (toolsScore / 4) * 100; const progressEl = document.getElementById('tools-progress'); const textEl = document.getElementById('tools-text'); if (progressEl) progressEl.style.width = percentage + '%'; if (textEl) textEl.textContent = `${toolsScore}/4 Tools Mastered`; } window.returnToTrials = function() { // This would integrate with your SugarCube game if (typeof SugarCube !== 'undefined') { SugarCube.State.variables.industryProgress.careerPrepComplete = true; SugarCube.Engine.play('Industry Trials'); } else { console.log('Career Preparation Complete! Returning to Industry Trials...'); } }; // Initialize on load function initializeGame() { resetGameState(); updateSkillsProgress(); updateToolsProgress(); startPulseAnimation(); } // Initialize when DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initializeGame); } else { initializeGame(); } })(); </script>

<div id="credits-container"><div class="credits-content"><div class="title-section"><h1 class="credits-title">🎮 Game Credits</h1><div class="title-underline"></div></div><div class="creator-section"><div class="creator-card"><div class="creator-icon">👨‍💻</div><div class="creator-info"><h2 class="creator-name">Woon Cher Han</h2><p class="creator-role">Game Developer & Designer</p><p class="creator-academic">Year 4 Business Analytics Student</p><p class="creator-school">School of Computing</p><p class="creator-specialization">Specialising in Financial & Machine Learning Analytics</p></div></div></div><div class="collaboration-section"><div class="collaboration-card"><div class="cfg-logo"><img src="cfgfavicon.png" alt="CFG Logo" width="60" height="60"></div><div class="collaboration-info"><h3 class="collaboration-title">In Collaboration With</h3><p class="collaboration-name">Centre for Future-ready Graduates (CFG)</p><a href="https://nus.edu.sg/cfg/" target="_blank" class="cfg-link">Visit CFG Website</a><div class="cfg-social-links"><a href="https://www.instagram.com/nuscfg/" target="_blank" class="cfg-link">Instagram</a> <a href="https://www.facebook.com/nuscfg/" target="_blank" class="cfg-link">Facebook</a> <a href="https://www.linkedin.com/company/centre-for-future-ready-graduates" target="_blank" class="cfg-link">LinkedIn</a> <a href="https://www.youtube.com/c/nuscfg" target="_blank" class="cfg-link">YouTube </a></div></div></div></div><div class="thank-you-section"><p class="thank-you-text">Thank you for playing!</p><div class="stars">👣 👣 👣</div></div><div class="navigation-section"><a href="#" onclick="SugarCube.Engine.play('StartMenu')">🏠 Back to Main Menu</a></div></div></div> <style> #credits-container { width: 700px; margin: 0; display: flex; align-items: center; justify-content: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; padding: 20px; box-sizing: border-box; border-radius: 30px; } .credits-content { background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 25px; margin: 0px; padding: 40px; text-align: center; backdrop-filter: blur(15px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); color: white; width: 90%; max-width: 600px; animation: fadeIn 1s ease-out; } .title-section { margin: 0 0 30px 0; } .credits-title { font-size: 2.5em; margin: 0 0 15px 0; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); animation: glow 3s ease-in-out infinite alternate; } .title-underline { width: 80px; height: 4px; background: linear-gradient(90deg, #FFD700, #FFA500); margin: 0 auto; border-radius: 2px; animation: expand 1s ease-out 0.5s both; } .creator-section { margin: 30px 0; } .creator-card { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 30px; display: flex; align-items: center; justify-content: center; gap: 20px; transition: all 0.3s ease; animation: slideUp 1s ease-out 0.8s both; } .creator-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.2); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .creator-icon { font-size: 4em; animation: bounce 2s infinite; } .creator-info { text-align: left; } .creator-name { font-size: 1.8em; margin: 0 0 8px 0; font-weight: bold; color: #FFD700; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .creator-role { font-size: 1.1em; margin: 0 0 5px 0; opacity: 0.9; font-style: italic; } .creator-academic { font-size: 1em; margin: 0 0 3px 0; opacity: 0.85; color: #E6F3FF; } .creator-specialization { font-size: 0.9em; margin: 0; opacity: 0.8; color: #FFE4B5; font-weight: 500; } .tech-stack-section { margin: 30px 0; animation: slideUp 1s ease-out 1.3s both; } .tech-stack-card { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 25px; display: flex; align-items: center; justify-content: center; gap: 20px; transition: all 0.3s ease; } .tech-stack-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.15); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .tech-icon { font-size: 3em; animation: rotate 3s linear infinite; } .tech-info { text-align: left; } .tech-title { font-size: 1.2em; margin: 0 0 12px 0; font-weight: bold; color: #87CEEB; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .tech-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .tech-badge { background: rgba(135, 206, 235, 0.2); border: 1px solid rgba(135, 206, 235, 0.5); color: #87CEEB; padding: 4px 10px; border-radius: 12px; font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .tech-extras { font-size: 0.85em; margin: 0; opacity: 0.8; font-style: italic; color: #E0E0E0; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .collaboration-section { margin: 30px 0; animation: slideUp 1s ease-out 1s both; } .collaboration-card { background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 25px; display: flex; align-items: center; justify-content: center; gap: 20px; transition: all 0.3s ease; } .collaboration-card:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.15); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } .cfg-logo { animation: pulse 2s ease-in-out infinite; } .collaboration-info { text-align: left; } .collaboration-title { font-size: 1.2em; margin: 0 0 8px 0; font-weight: bold; color: #B8E6B8; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .collaboration-name { font-size: 1.1em; margin: 0 0 10px 0; opacity: 0.9; font-style: italic; } .cfg-link { display: inline-block; color: #FFD700; text-decoration: none; font-size: 0.9em; font-weight: bold; border: 1px solid rgba(255, 215, 0, 0.5); padding: 5px 12px; border-radius: 15px; transition: all 0.3s ease; background: rgba(255, 215, 0, 0.1); margin: 3px 3px 0 0; } .cfg-link:hover { background: rgba(255, 215, 0, 0.2); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3); } .thank-you-section { margin: 40px 0; animation: fadeIn 1s ease-out 1.2s both; } .thank-you-text { font-size: 1.3em; margin: 0 0 15px 0; opacity: 0.9; font-style: italic; } .stars { font-size: 1.5em; animation: twinkle 2s ease-in-out infinite; } .navigation-section { margin-top: 40px; animation: slideUp 1s ease-out 1.5s both; } .navigation-section a { display: inline-block; background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.3); color: white; text-decoration: none; padding: 15px 30px; border-radius: 50px; font-size: 1.1em; font-weight: bold; transition: all 0.3s ease; backdrop-filter: blur(10px); } .navigation-section a:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .navigation-section a:active { transform: translateY(-1px); } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes expand { from { width: 0; } to { width: 80px; } } @keyframes glow { 0% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } 100% { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.3); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } @keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.1); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @media (max-width: 768px) { #credits-container { padding: 20px 15px; width: 100%; } .credits-content { padding: 30px 20px; width: 95%; } .credits-title { font-size: 2em; } .creator-card, .collaboration-card, .tech-stack-card { flex-direction: column; text-align: center; gap: 15px; } .creator-info, .collaboration-info, .tech-info { text-align: center; } .creator-name { font-size: 1.5em; } .collaboration-title { font-size: 1.1em; } .collaboration-name { font-size: 1em; } .navigation-section a { padding: 12px 25px; font-size: 1em; } } </style>

<<if !$fq1 or !$fq2 or !$fq3>><<set $fq1 = "">><<set $fq2 = "">><<set $fq3 = "">><</if>><div class="content-container"><div class="page-header"><img src="financial-wellbeing.png" alt="Financial Wellbeing" class="page-logo"><h2>Financial Wellbeing</h2></div><p><em>Sound personal financial management is a critical skill that equips students to be future-ready, face life's changes and transitions with confidence, and thrive across personal and professional life domains.</em></p><p><strong>Financial Wellbeing</strong> provides students with training in essential financial planning skills and goes a step further by addressing the mental and emotional aspects of money management.</p><p>💡 Learn more here: <a href="https://nus.edu.sg/cfg/students/career-ready/life-skills/financial-wellbeing" target="_blank">Finanical Wellbeing</a></p><hr><h3>🧠 Training Quiz</h3><p>Answer the following questions to complete your training. You may need to visit the website above.</p><strong>1. Which organization developed Introduction to Financial Wellbeing (CFG1003) in partnership with NUS CFG?</strong><br><<radiobutton "$fq1" "MoneySense">> MoneySense<br><<radiobutton "$fq1" "PlayMoolah">> PlayMoolah<br><<radiobutton "$fq1" "MoneyOwl">> MoneyOwl<br><<radiobutton "$fq1" "OCBC Bank">> OCBC Bank<br><br><strong>2. How many Unrestricted Elective (UE) units is CFG1004 (Financial Readiness for Young Professionals) worth?</strong><br><<radiobutton "$fq2" "0 Units">> 0 Units<br><<radiobutton "$fq2" "1 Unit">> 1 Unit<br><<radiobutton "$fq2" "2 Units">> 2 Units<br><<radiobutton "$fq2" "3 Units">> 3 Units<br><br><strong>3. What is the co-requisite for CFG1004?</strong><br><<radiobutton "$fq3" "CFG1001">> CFG1001<br><<radiobutton "$fq3" "CFG1002">> CFG1002<br><<radiobutton "$fq3" "CFG1003">> CFG1003<br><<radiobutton "$fq3" "No co-requisites">> No co-requisites<br><br><div id="financial-quiz-message"></div><div id="financial-quiz-button"><div class="custom-button" onclick="checkFinancialAnswers()">Submit Answers</div></div><br><br><br></div> <<script>> window.checkFinancialAnswers = function() { let wrongCount = 0; let wrongMsg = ""; if (variables().fq1 !== "PlayMoolah") { wrongCount += 1; wrongMsg += "<p>❌ Question 1 is incorrect. </p>"; } if (variables().fq2 !== "2 Units") { wrongCount += 1; wrongMsg += "<p>❌ Question 2 is incorrect. </p>"; } if (variables().fq3 !== "No co-requisites") { wrongCount += 1; wrongMsg += "<p>❌ Question 3 is incorrect. </p>"; } if (wrongCount === 0) { variables().learnedFinancial = true; variables().financial += 6; if (typeof updateStatBoard === 'function') { updateStatBoard(); } document.getElementById("financial-quiz-message").innerHTML = "<p><strong>✅ Training complete!</strong> You gain <strong>+6 Financial</strong>.</p>" + "<p>You've unlocked financial literacy, emotional resilience, and investment knowledge!</p>"; document.getElementById("financial-quiz-button").innerHTML = '<a href="javascript:void(0)" onclick="SugarCube.Engine.play(\'Power Awakening\')" class="return-link">Return to Power Awakening</a><br><br><br>'; } else { document.getElementById("financial-quiz-message").innerHTML = "<p><span style=\"color: red;\">❌ You got <strong>" + wrongCount + "</strong> question(s) wrong. Unsure? Check back to the URL above!</span></p>" + wrongMsg; } }; <</script>> <style> .page-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; justify-content: center; } .page-logo { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; } .page-header h2 { margin: 0; } .custom-button { background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%); color: #1a202c; /* Dark text for contrast */ padding: 12px 24px; border-radius: 8px; cursor: pointer; display: inline-block; font-weight: 600; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border: none; font-size: 16px; min-width: 140px; } .custom-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, #f6a440 0%, #dd6b20 100%); } .custom-button:active { transform: translateY(0px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .return-link { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; display: inline-block; font-weight: 600; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); min-width: 140px; } .return-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, #38a169 0%, #2f855a 100%); color: white; text-decoration: none; } </style>

<<if !$q1 or !$q2 or !$q3>><<set $q1 = "">><<set $q2 = "">><<set $q3 = "">><</if>><div class="content-container"><div class="page-header"><img src="global-insights.png" alt="Global Industry Insights" class="page-logo"><h2>Global Industry Insights (CFG2002)</h2></div><p><em>Gain an immersive understanding of emerging economies in the region by visiting them and enhancing your global mindset.</em></p><p><strong>Global Industry Insights</strong> offers in-country experiences where you visit, meet and learn from established companies across Asia over a week-long trip, developing communication, collaboration, and networking skills.</p><p>💡 Learn more here: <a href="https://nus.edu.sg/cfg/students/career-ready/industry-insights" target="_blank">Industry Insights</a></p><hr><h3>🧠 Training Quiz</h3><p>Answer the following questions to complete your training. You may need to visit the website above.</p><strong>1. How many Unrestricted Elective (UE) units is Global Industry Insights worth?</strong><br><<radiobutton "$q1" "1">> 1 Unit<br><<radiobutton "$q1" "2">> 2 Units<br><<radiobutton "$q1" "3">> 3 Units<br><<radiobutton "$q1" "4">> 4 Units<br><br><strong>2. What is ASEAN projected to become by 2030?</strong><br><<radiobutton "$q2" "3rd largest single market">> 3rd largest single market<br><<radiobutton "$q2" "4th largest single market">> 4th largest single market<br><<radiobutton "$q2" "5th largest single market">> 5th largest single market<br><<radiobutton "$q2" "2nd largest single market">> 2nd largest single market<br><br><strong>3. What is the maximum number of students per country for the trips?</strong><br><<radiobutton "$q3" "30 students">> 30 students<br><<radiobutton "$q3" "36 students">> 36 students<br><<radiobutton "$q3" "40 students">> 40 students<br><<radiobutton "$q3" "32 students">> 32 students<br><br><div id="global-quiz-message"></div><div id="global-quiz-button"><div class="custom-button" onclick="checkGlobalAnswers()">Submit Answers</div></div><br><br><br></div> <<script>> window.checkGlobalAnswers = function() { let wrongCount = 0; let wrongMsg = ""; if (variables().q1 !== "2") { wrongCount += 1; wrongMsg += "<p>❌ Question 1 is incorrect. </p>"; } if (variables().q2 !== "4th largest single market") { wrongCount += 1; wrongMsg += "<p>❌ Question 2 is incorrect. </p>"; } if (variables().q3 !== "36 students") { wrongCount += 1; wrongMsg += "<p>❌ Question 3 is incorrect. </p>"; } if (wrongCount === 0) { variables().learnedGlobal = true; variables().networking += 4; variables().careerReadiness += 4; variables().techSkills += 2; variables().strength += 4; if (typeof updateStatBoard === 'function') { updateStatBoard(); } document.getElementById("global-quiz-message").innerHTML = "<p><strong>✅ Training complete!</strong> You gain multiple power boosts:</p>" + "<p><strong>+4 Networking, +4 Career Readiness, +2 Tech Skills, +4 Strength</strong></p>" + "<p>You've unlocked global mindset, cross-cultural communication, and business acumen!</p>"; document.getElementById("global-quiz-button").innerHTML = '<a href="javascript:void(0)" onclick="SugarCube.Engine.play(\'Power Awakening\')" class="return-link">Return to Power Awakening</a>'; } else { document.getElementById("global-quiz-message").innerHTML = "<p><span style=\"color: red;\">❌ You got <strong>" + wrongCount + "</strong> question(s) wrong.</span>❓ Unsure? Check back to the URL above!</p>" + wrongMsg; } }; <</script>> <style> .page-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; justify-content: center; } .page-logo { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; } .page-header h2 { margin: 0; } .custom-button { background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%); color: #1a202c; /* Dark text for contrast */ padding: 12px 24px; border-radius: 8px; cursor: pointer; display: inline-block; font-weight: 600; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border: none; font-size: 16px; min-width: 140px; } .custom-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, #f6a440 0%, #dd6b20 100%); } .custom-button:active { transform: translateY(0px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .return-link { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; display: inline-block; font-weight: 600; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); min-width: 140px; } .return-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, #38a169 0%, #2f855a 100%); color: white; text-decoration: none; } .return-link, .return-link:visited, .return-link:hover, .return-link:active { text-decoration: none; } </style>

<<set $groupTimeLeft = 90>> <<set $collaborationPoints = 0>> <<set $learnedCareerGroup = false>> <div class="content-container"> <h2>👥 Group Coaching Session In Progress</h2><p>Your 1.5 hour (1.5-minute) group coaching session has begun. Your goal: Click on your teammates and engage with as many of them for collaboration and earn points! </p> <p><strong>Time remaining:</strong> <span id="groupTimeDisplay">90</span> seconds | <strong>Collaboration points:</strong> <span id="collabCount">0</span>/10</p><p style="font-style: italic; margin-bottom: 0.5em;">💡 Click on your teammates 👨‍🎓👩‍🎓 to collaborate before they move away!</p><div id="groupArea" style="position: relative; height: 350px; background: linear-gradient(135deg, #e8f5e8, #f0f8ff); border: 2px dashed #4a90e2; margin-top: 0; overflow: hidden; border-radius: 8px;"></div><div id="groupNextLink" style="margin-top: 20px; text-align: center;"></div> </div> <style> .content-container, #groupArea, #groupNextLink { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } /* Enhanced next button styling */ #groupNextLink .link-internal { display: inline-block !important; padding: 15px 35px !important; background: linear-gradient(45deg, #28a745, #20c997) !important; color: white !important; text-decoration: none !important; border-radius: 50px !important; font-size: 1.2em !important; font-weight: bold !important; text-transform: uppercase !important; letter-spacing: 1px !important; box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4) !important; transition: all 0.3s ease !important; border: 2px solid transparent !important; cursor: pointer !important; position: relative !important; overflow: hidden !important; margin: 15px 0 !important; } /* Shimmer effect for next button */ #groupNextLink .link-internal:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s; } #groupNextLink .link-internal:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 35px rgba(40, 167, 69, 0.6) !important; background: linear-gradient(45deg, #20c997, #28a745) !important; border-color: rgba(255, 255, 255, 0.4) !important; } #groupNextLink .link-internal:hover:before { left: 100%; } #groupNextLink .link-internal:active { transform: translateY(-1px) !important; } </style> <<script>> $(document).one(':passageend', function() { let timeLeft = 90; let collabPoints = 0; const timeDisplay = document.getElementById("groupTimeDisplay"); const collabDisplay = document.getElementById("collabCount"); const groupArea = document.getElementById("groupArea"); const nextLinkDiv = document.getElementById("groupNextLink"); const teammates = ["👨‍🎓", "👩‍🎓", "🧑‍💼", "👩‍💻", "👨‍🔬", "👩‍🎨"]; function endGroupSession() { // Update SugarCube variables using the proper method State.variables.collaborationPoints = collabPoints; State.variables.groupTimeLeft = timeLeft; State.variables.learnedCareerGroup = true; // Add career readiness points State.variables.careerReadiness += 8; if (typeof updateStatBoard === "function") { updateStatBoard(); } // Create the completion message and link let performance = ""; if (collabPoints >= 10) { performance = "🌟 Outstanding collaboration! You're a natural team player!"; } else if (collabPoints >= 7) { performance = "💪 Great teamwork! You work well with others!"; } else if (collabPoints >= 4) { performance = "👍 Good effort! Keep building those collaboration skills!"; } else { performance = "🤝 Every collaboration counts! Practice makes perfect!"; } nextLinkDiv.innerHTML = ` <p><strong>✅ Your group coaching session is complete!!</strong></p> <p>Collaboration points: ${collabPoints}/10 | Time used: ${90-timeLeft} seconds</p> <p style="color: #28a745; font-weight: bold;">${performance}</p> <p style="color: #28a745; font-weight: bold;">📈 Career Readiness +10 (Total: ${State.variables.careerReadiness})</p> `; // Create the next link properly for SugarCube const linkElement = document.createElement("div"); linkElement.innerHTML = '<a class="link-internal" data-passage="Industry Trials">🏭 Next: Industry Trials 🚀</a>'; nextLinkDiv.appendChild(linkElement); // Make the link clickable using SugarCube's engine $(linkElement).find('.link-internal').on('click', function(e) { e.preventDefault(); Engine.play($(this).attr('data-passage')); }); } const timer = setInterval(() => { if (timeLeft <= 0 || collabPoints >= 10) { clearInterval(timer); clearInterval(spawner); endGroupSession(); return; // ✅ Prevent decrementing after end condition } timeLeft--; timeDisplay.textContent = timeLeft; }, 1000); function spawnTeammate() { if (timeLeft <= 0 || collabPoints >= 10) return; const teammate = document.createElement("div"); teammate.textContent = teammates[Math.floor(Math.random() * teammates.length)]; teammate.style.position = "absolute"; teammate.style.fontSize = "35px"; teammate.style.cursor = "pointer"; teammate.style.top = Math.floor(Math.random() * 280) + "px"; teammate.style.left = Math.floor(Math.random() * 85) + "%"; teammate.style.transition = "all 0.3s ease"; teammate.style.userSelect = "none"; // Add hover effect teammate.onmouseenter = function() { teammate.style.transform = "scale(1.2)"; }; teammate.onmouseleave = function() { teammate.style.transform = "scale(1)"; }; teammate.onclick = function () { collabPoints++; timeLeft = Math.max(0, timeLeft - 8); collabDisplay.textContent = collabPoints; timeDisplay.textContent = timeLeft; // Add collaboration animation teammate.style.transform = "scale(1.5)"; teammate.style.opacity = "0.5"; setTimeout(() => { if (teammate.parentNode) teammate.remove(); }, 200); // Show collaboration message briefly const collabMsg = document.createElement("div"); collabMsg.textContent = "Great collaboration! +1"; collabMsg.style.position = "absolute"; collabMsg.style.top = teammate.style.top; collabMsg.style.left = teammate.style.left; collabMsg.style.color = "#28a745"; collabMsg.style.fontWeight = "bold"; collabMsg.style.fontSize = "14px"; collabMsg.style.pointerEvents = "none"; collabMsg.style.zIndex = "1000"; groupArea.appendChild(collabMsg); setTimeout(() => { if (collabMsg.parentNode) collabMsg.remove(); }, 800); }; groupArea.appendChild(teammate); // Remove teammate after some time if not clicked setTimeout(() => { if (teammate.parentNode) teammate.remove(); }, 1200); } const spawner = setInterval(spawnTeammate, 1500); // Add some initial context text const contextDiv = document.createElement("div"); contextDiv.innerHTML = ` <div style="position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.9); padding: 8px; border-radius: 5px; font-size: 12px; max-width: 200px; color: black;"> <strong>Group Session:</strong> Work with others to solve career challenges together! </div> `; groupArea.appendChild(contextDiv); }); <</script>>

<<set $coachingTimeLeft = 60>> <<set $balloonsPopped = 0>> <<set $learnedCareerIndividual = false>> <div class="content-container"> <h2>🎯 Individual Coaching Session In Progress</h2><p>Your 1 hour (1-minute) career coaching session has begun. Your goal: Pop red balloons to gain new insights and purpose to hasten your pathway!</p> <p><strong>Time remaining:</strong> <span id="timeDisplay">60</span> seconds</p><p style="font-style: italic; margin-bottom: 0.5em;">💡 Pop only the red 🎈 balloons! Avoid other shapes or time will increase!</p><div id="balloonArea" style="position: relative; height: 350px; background: linear-gradient(135deg, #fff5ee, #e6f3ff); border: 2px dashed #ff6b6b; margin-top: 0; overflow: hidden; border-radius: 8px;"></div><div id="nextLink" style="margin-top: 20px; text-align: center;"></div> </div> <style> /* Enhanced next button styling */ #nextLink .link-internal { display: inline-block !important; padding: 15px 35px !important; background: linear-gradient(45deg, #28a745, #20c997) !important; color: white !important; text-decoration: none !important; border-radius: 50px !important; font-size: 1.2em !important; font-weight: bold !important; text-transform: uppercase !important; letter-spacing: 1px !important; box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4) !important; transition: all 0.3s ease !important; border: 2px solid transparent !important; cursor: pointer !important; position: relative !important; overflow: hidden !important; margin: 15px 0 !important; } /* Shimmer effect for next button */ #nextLink .link-internal:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s; } #nextLink .link-internal:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 35px rgba(40, 167, 69, 0.6) !important; background: linear-gradient(45deg, #20c997, #28a745) !important; border-color: rgba(255, 255, 255, 0.4) !important; } #nextLink .link-internal:hover:before { left: 100%; } #nextLink .link-internal:active { transform: translateY(-1px) !important; } </style> <<script>> $(document).one(':passageend', function() { let timeLeft = 60; const timeDisplay = document.getElementById("timeDisplay"); const poppedDisplay = document.getElementById("poppedCount"); const balloonArea = document.getElementById("balloonArea"); const nextLinkDiv = document.getElementById("nextLink"); const redBalloon = "🎈"; const distractors = ["🟥", "🟦", "🟨", "🟪", "🟩", "🟧"]; function endSession() { // Update SugarCube variables State.variables.coachingTimeLeft = timeLeft; State.variables.learnedCareerIndividual = true; // Add career readiness points State.variables.careerReadiness += 8; if (typeof updateStatBoard === "function") { updateStatBoard(); } // Create the completion message and link let performance = "🎯 Your 1 hour coaching session is complete!"; nextLinkDiv.innerHTML = ` <p><strong>✅ Your coaching session is complete!!</strong></p> <p style="color: #28a745; font-weight: bold;">${performance}</p> <p style="color: #28a745; font-weight: bold;">📈 Career Readiness +8 (Total: ${State.variables.careerReadiness})</p> `; // Create the next link properly for SugarCube const linkElement = document.createElement("div"); linkElement.innerHTML = '<a class="link-internal" data-passage="Industry Trials">🏭 Next: Industry Trials 🚀</a>'; nextLinkDiv.appendChild(linkElement); // Make the link clickable using SugarCube's engine $(linkElement).find('.link-internal').on('click', function(e) { e.preventDefault(); Engine.play($(this).attr('data-passage')); }); } const timer = setInterval(() => { if (timeLeft <= 0) { clearInterval(timer); clearInterval(spawner); endSession(); return; // Exit early to prevent subtracting } timeLeft--; timeDisplay.textContent = timeLeft; }, 1000); function spawnItem() { if (timeLeft <= 0) return; const item = document.createElement("div"); const isRedBalloon = Math.random() < 0.5; if (isRedBalloon) { item.textContent = redBalloon; item.classList.add("red-balloon"); } else { item.textContent = distractors[Math.floor(Math.random() * distractors.length)]; item.classList.add("distractor"); } item.style.position = "absolute"; item.style.fontSize = "35px"; item.style.cursor = "pointer"; item.style.top = Math.floor(Math.random() * 280) + "px"; item.style.left = Math.floor(Math.random() * 85) + "%"; item.style.transition = "all 0.3s ease"; item.style.userSelect = "none"; item.style.animation = "float 2s ease-in-out infinite alternate"; // Add hover effect item.onmouseenter = function() { item.style.transform = "scale(1.2)"; }; item.onmouseleave = function() { item.style.transform = "scale(1)"; }; item.onclick = function () { if (item.classList.contains("red-balloon")) { // Clicked on red balloon - good! timeLeft = Math.max(0, timeLeft - 10); timeDisplay.textContent = timeLeft; // Add pop animation item.style.transform = "scale(1.5)"; item.style.opacity = "0.3"; item.textContent = "💥"; setTimeout(() => { if (item.parentNode) item.remove(); }, 200); // Show success message briefly const popMsg = document.createElement("div"); popMsg.textContent = "Great! -10s"; popMsg.style.position = "absolute"; popMsg.style.top = item.style.top; popMsg.style.left = item.style.left; popMsg.style.color = "#28a745"; popMsg.style.fontWeight = "bold"; popMsg.style.fontSize = "14px"; popMsg.style.pointerEvents = "none"; popMsg.style.zIndex = "1000"; balloonArea.appendChild(popMsg); setTimeout(() => { if (popMsg.parentNode) popMsg.remove(); }, 800); } else { // Clicked on distractor - penalty! timeLeft += 5; // Increase time as penalty timeDisplay.textContent = timeLeft; // Add penalty animation item.style.transform = "scale(0.8)"; item.style.opacity = "0.3"; item.textContent = "❌"; setTimeout(() => { if (item.parentNode) item.remove(); }, 200); // Show penalty message briefly const penaltyMsg = document.createElement("div"); penaltyMsg.textContent = "Wrong! +5s"; penaltyMsg.style.position = "absolute"; penaltyMsg.style.top = item.style.top; penaltyMsg.style.left = item.style.left; penaltyMsg.style.color = "#dc3545"; penaltyMsg.style.fontWeight = "bold"; penaltyMsg.style.fontSize = "14px"; penaltyMsg.style.pointerEvents = "none"; penaltyMsg.style.zIndex = "1000"; balloonArea.appendChild(penaltyMsg); setTimeout(() => { if (penaltyMsg.parentNode) penaltyMsg.remove(); }, 800); } }; balloonArea.appendChild(item); // Remove item after some time if not clicked setTimeout(() => { if (item.parentNode) item.remove(); }, 2500); } const spawner = setInterval(spawnItem, 1500); // Add some initial context text const contextDiv = document.createElement("div"); contextDiv.innerHTML = ` <div style="position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.9); padding: 8px; border-radius: 5px; font-size: 12px; max-width: 200px; color: black;"> <strong>Individual Session:</strong> Click only red balloons 🎈! Avoid squares or time increases! </div> `; balloonArea.appendChild(contextDiv); // Add floating animation with CSS const style = document.createElement('style'); style.textContent = ` @keyframes float { 0% { transform: translateY(0px); } 100% { transform: translateY(-10px); } } `; document.head.appendChild(style); }); <</script>>

<<silently>>  <<if typeof $industryProgress === "undefined">> <<set $industryProgress = { internshipComplete: false, careerPrepComplete: false }>> <</if>> <<if typeof $commSkill === "undefined">><<set $commSkill = 0>><</if>> <<if typeof $techSkill === "undefined">><<set $techSkill = 0>><</if>> <<if typeof $leadSkill === "undefined">><<set $leadSkill = 0>><</if>> <<if typeof $careerSkill === "undefined">><<set $careerSkill = 0>><</if>> <<if typeof $industrySkills === "undefined">> <<set $industrySkills = { communication: 0, technical: 0, leadership: 0, careerReadiness: 0 }>> <</if>> <</silently>> <div class="content-container"> <div class="arena-header"><h2>🏭 The Industry Arena</h2><div class="arena-description-with-image"><img src="manyprofessionals.png" alt="Seasoned professionals" class="arena-image"> <div class="arena-description"> The massive steel doors slide open with a mechanical hiss, revealing a sprawling complex of glass towers and bustling workspaces.<br> Here, seasoned professionals from every corner of the corporate world gather to forge the next generation of industry leaders. </div> </div> <em>External Masters await to share their wisdom and test your mettle for your final battle!</em> </div><div class="quest-selection"><h3>Choose Your Path Forward:</h3> <div class="quest-option internship <<if $industryProgress.internshipComplete>>completed<</if>>"> <div class="quest-icon"> <<if $industryProgress.internshipComplete>>✅<</if>>💼 </div> <div class="quest-content"> <h4>Internship Training <<if $industryProgress.internshipComplete>><span class="completion-badge">COMPLETED</span><</if>></h4><p>Dive deep into hands-on experience with real companies. Learn the ropes from the ground up while building your professional portfolio through practical challenges.</p><span class="difficulty"></span><div class="quest-button"><<if $industryProgress.internshipComplete>><<link "Review Training">> <<script>>window.playSound('button', 0.5);<</script>> <<goto "Internship Training">> <</link>><<else>><<link "Start Training">> <<script>>window.playSound('button', 0.5);<</script>> <<goto "Internship Training">> <</link>> <</if>> </div> </div> </div> <div class="quest-option career-prep <<if $industryProgress.careerPrepComplete>>completed<</if>>"> <div class="quest-icon"> <<if $industryProgress.careerPrepComplete>>✅<</if>>🎯 </div> <div class="quest-content"> <h4>Career Preparation <<if $industryProgress.careerPrepComplete>><span class="completion-badge">COMPLETED</span><</if>></h4><p>Master the essential skills needed for career success. From interview techniques to professional communication, prepare for your future role.</p><span class="difficulty"></span><div class="quest-button"><<if $industryProgress.careerPrepComplete>><<link "Review Preparation">> <<script>>window.playSound('button', 0.5);<</script>> <<goto "Career Preparation">> <</link>><<else>><<link "Start Preparation">> <<script>>window.playSound('button', 0.5);<</script>> <<goto "Career Preparation">> <</link>> <</if>> </div> </div> </div> </div><<if $industryProgress.internshipComplete and $industryProgress.careerPrepComplete>> <div class="final-battle-section"> <div class="final-battle-container"> <h3>🎉 Industry Mastery Achieved!</h3> <p>You have successfully completed your training. You are now ready for the ultimate challenge - to face the Monster of Fear & Doubt!!</p> <div class="final-battle-btn"> <<link "⚔️ Enter Final Battle ⚔️">> <<script>>window.playSound('start-battle', 0.5);<</script>> <<set $industrySkills.communication = $commSkill>> <<set $industrySkills.technical = $techSkill>> <<set $industrySkills.leadership = $leadSkill>> <<set $industrySkills.careerReadiness = $careerSkill>> <<goto "Final Battle">> <</link>> </div> </div> </div> <<else>> <div class="arena-footer"> <p class="hint"><strong>Advice of External Masters:</strong> Complete both training paths to unlock the Final Battle. Each path provides essential skills for your professional journey.</p> </div> <</if>> </div> <style> .arena-description-with-image { display: flex; align-items: flex-start; gap: 15px; max-width: 700px; margin: 0 auto; } .arena-image { flex-shrink: 0; width: 200px; height: 200px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); object-fit: cover; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } @media (max-width: 600px) { .arena-description-with-image { flex-direction: column; align-items: center; text-align: center; } .arena-image { width: 80%; max-width: 250px; } } .content-container { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 15px; max-width: 800px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.3); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: white; } .arena-header { background: rgba(255,255,255,0.15); color: white; padding: 20px; border-radius: 15px; margin-bottom: 0px; text-align: center; backdrop-filter: blur(10px); } .arena-header h2 { margin: 0 px; font-size: 2em; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); color: #FFD700; } .arena-description { font-size: 1.1em; line-height: 1.4; max-width: 600px; margin: 0 auto; opacity: 0.9; } .arena-description em { display: block; margin-top: 0px; font-style: italic; opacity: 0.8; } .quest-selection h3 { text-align: center; color: #FFD700; margin-bottom: 25px; font-size: 1.4em; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } .quest-option { display: flex; align-items: center; background: rgba(255,255,255,0.95); border: 3px solid transparent; border-radius: 15px; padding: 20px; margin-bottom: 0px; transition: all 0.3s ease; backdrop-filter: blur(5px); } .quest-option:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.2); } .quest-option.internship { border-color: #FF6B6B; background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 255, 255, 0.95)); } .quest-option.internship:hover { border-color: #FF6B6B; box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3); } .quest-option.career-prep { border-color: #4ECDC4; background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), rgba(255, 255, 255, 0.95)); } .quest-option.career-prep:hover { border-color: #4ECDC4; box-shadow: 0 8px 25px rgba(78, 205, 196, 0.3); } .quest-option.completed { opacity: 0.8; background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(255, 255, 255, 0.95)); border-color: #27ae60; } .quest-option.completed:hover { border-color: #27ae60; box-shadow: 0 8px 25px rgba(39, 174, 96, 0.3); } .quest-icon { font-size: 2.5em; margin-right: 20px; width: 60px; text-align: center; } .quest-content { flex-grow: 1; } .quest-content h4 { margin: 0px; color: #2c3e50; font-size: 1.3em; font-weight: bold; display: flex; align-items: center; } .completion-badge { background: #27ae60; color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.7em; font-weight: bold; } .quest-content p { margin: 0px; color: #555; line-height: 1.5; } .difficulty { font-size: 0.9em; display: block; margin-bottom: 10px; color: #555; } .quest-button { margin-top: 0px; } .quest-button a { display: inline-block; background: #3498db; color: white; padding: 8px 16px; border-radius: 5px; text-decoration: none; font-weight: bold; transition: background 0.3s ease; } .quest-button a:hover { background: #2980b9; } .final-battle-section { margin-top: 0px; } .final-battle-container { text-align: center; background: linear-gradient(135deg, #FFD700, #FFA500); padding: 30px; border-radius: 20px; border: 3px solid #FF6B6B; box-shadow: 0 15px 35px rgba(0,0,0,0.4); animation: glow 2s ease-in-out infinite alternate; color: #333; } .final-battle-container h3 { color: #333; font-size: 1.8em; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .final-battle-container p { font-size: 1.2em; margin-bottom: 0px; opacity: 0.9; color: #333; } .final-battle-btn { display: inline-block; } .final-battle-btn a { display: inline-block; background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7); background-size: 300% 300%; animation: gradientShift 3s ease infinite; color: white; font-size: 1.4em; font-weight: bold; padding: 20px 40px; border-radius: 50px; text-decoration: none; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); box-shadow: 0 8px 20px rgba(0,0,0,0.3); transition: transform 0.3s ease; border: 3px solid rgba(255,255,255,0.3); } .final-battle-btn a:hover { transform: scale(1.1) translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.4); } .arena-footer { background: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px; margin-top: 25px; border-left: 4px solid #FFD700; backdrop-filter: blur(5px); } .hint { margin: 0px; color: white; font-style: italic; opacity: 0.9; } .hint strong { color: #FFD700; } @keyframes glow { 0% { box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 0 20px rgba(255,215,0,0.3); } 100% { box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 0 40px rgba(255,215,0,0.6); } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style>

<div id="internship-container"> <h2>🎯 Internship Training Challenge</h2><div id="cfg-info"> <div class="info-card"><h3>Explore CFG Internship Services</h3><p>Before you begin your training, learn about real internship opportunities! The NUS Centre for Future-ready Graduates (CFG) provides comprehensive support for students seeking internships and career development.</p><div class="cfg-link"> <a href="https://nus.edu.sg/cfg/students/jobs-internships/internships" target="_blank"> 🔗 Learn more </a></div> </div> </div><p class="intro-text">You apprentice with skilled masters in the industry, learning hands-on.<br>Complete these professional tasks to build your skills!</p> <div id="game-area"> <div id="challenge-card"><h3 id="challenge-title">Ready to Start?</h3><p id="challenge-description">Click "Start Training" to begin your internship challenges!</p><div id="challenge-options" style="display: none;"> <button class="option-btn active-challenge" data-skill="comm" data-points="25">📧 Send Professional Email</button> <button class="option-btn active-challenge" data-skill="tech" data-points="25">💻 Address Project Delays</button> <button class="option-btn active-challenge" data-skill="lead" data-points="25">🤝 Lead Team Meeting</button> </div><div id="task-game" style="display: none;"><div id="typing-challenge"><p><strong>Your supervisor says:</strong> "The client wants changes to the project immediately. This is urgent!"</p><p>How do you respond professionally?</p> <div id="comm-options"> <button class="comm-option" data-correct="false">📱 "I'll try my best but no guarantees on timing."</button> <button class="comm-option" data-correct="true">✅ "I understand the urgency. Let me review the changes and provide a realistic timeline within the hour."</button> <button class="comm-option" data-correct="false">😤 "This is unrealistic. The client needs to be more patient."</button> </div> <div id="typing-feedback"></div> </div> <div id="sequence-challenge" style="display: none;"> <p>Click the steps you should take to address project delays, in the correct order</p><div id="sequence-buttons"><button class="seq-btn" data-order="1">Identify Problem</button> <button class="seq-btn" data-order="3">Establish a Framework for Shared Communication</button> <button class="seq-btn" data-order="2">Define Roles & Responsibilities</button> <button class="seq-btn" data-order="4">Document changes and feeback</button> </div> <div id="sequence-feedback"></div> </div> <div id="timing-challenge" style="display: none;"> <p>Keep your meetings concise. Foster structure, clarity, and open dialogue in meetings to lead to meaningful outcomes while respecting everyone’s time.</p> <p>Click when the meeting timer shows exactly 10 seconds!</p> <div id="timer-display">00:00</div> <button id="timer-click">⏰ Perfect Timing!</button> <button id="retry-timing" style="display: none; margin-left: 10px;">🔄 Try Again</button> <div id="timing-feedback"></div> </div> </div> <button id="start-btn">🚀 Start Training</button> <button id="next-challenge" style="display: none;">Next Challenge</button> </div> </div> <div id="navigation" style="display: none;"><div class="completion-container"><h3>🎉 Internship Training Complete!</h3><p>Congratulations! You've mastered the essential internship skills. Your practical experience will serve you well in your professional journey.</p><div class="final-actions"><div class="cfg-reminder"><p>💡 <strong>Next Step:</strong> Ready for a real internship? Visit CFG for personalized guidance!</p><a href="https://nus.edu.sg/cfg/students/jobs-internships/internships" target="_blank" rel="noopener noreferrer" class="cfg-final-link">🚀 Find Your Internship with CFG </a></div> <div class="back-to-trials-btn"> <<link "🏭 Return to Industry Trials">> <<set $industryProgress.internshipComplete = true>> <<goto "Industry Trials">> <</link>> </div> </div> </div> </div> </div> <style> #internship-container { max-width: 900px; margin: 0 auto; padding: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; color: white; box-shadow: 0 10px 30px rgba(0,0,0,0.3); } #cfg-info { margin-bottom: 25px; } .info-card { background: rgba(255,255,255,0.1); padding: 20px; border-radius: 12px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); } .info-card h3 { color: #FFD700; margin-bottom: 15px; font-size: 1.3em; } .info-card p { margin-bottom: 15px; line-height: 1.6; opacity: 0.9; } .cfg-highlights { margin: 20px 0; } .highlight-item { display: flex; align-items: center; margin: 10px 0; padding: 8px 0; } .highlight-icon { font-size: 1.2em; margin-right: 12px; min-width: 30px; } .cfg-link { text-align: center; margin-top: 20px; } .cfg-link a { display: inline-block; background: linear-gradient(45deg, #4ECDC4, #44A08D); color: white; text-decoration: none; padding: 12px 24px; border-radius: 25px; font-weight: bold; transition: transform 0.2s, box-shadow 0.2s; border: 2px solid rgba(255,255,255,0.3); } .cfg-link a:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .intro-text { text-align: center; font-size: 1.1em; margin-bottom: 20px; opacity: 0.9; } #game-area { margin-bottom: 20px; } #challenge-card { background: rgba(255,255,255,0.15); padding: 25px; border-radius: 15px; text-align: center; backdrop-filter: blur(10px); } #challenge-title { margin-bottom: 15px; color: #FFD700; } #challenge-description { margin-bottom: 20px; font-size: 1.1em; } .option-btn { display: block; width: 100%; margin: 10px 0; padding: 15px; border: none; border-radius: 10px; color: white; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, background 0.3s, border 0.3s; } .option-btn.active-challenge { background: linear-gradient(45deg, #FF6B6B, #4ECDC4); border: 3px solid #FFD700; box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); animation: glow-pulse 2s ease-in-out infinite; } .option-btn.active-challenge:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3), 0 0 25px rgba(255, 215, 0, 0.7); } .option-btn.completed { background: linear-gradient(45deg, #95a5a6, #7f8c8d); border: 3px solid #bdc3c7; color: #ecf0f1; cursor: not-allowed; opacity: 0.6; box-shadow: none; animation: none; } .option-btn.completed:hover { transform: none; box-shadow: none; } @keyframes glow-pulse { 0% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); border-color: #FFD700; } 50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.8); border-color: #FFA500; } 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.5); border-color: #FFD700; } } #start-btn, #next-challenge { background: linear-gradient(45deg, #FFD700, #FFA500); border: none; padding: 15px 30px; border-radius: 25px; color: #333; font-size: 1.2em; font-weight: bold; cursor: pointer; transition: transform 0.2s; } #start-btn:hover, #next-challenge:hover { transform: scale(1.05); } .comm-option { display: block; width: 100%; margin: 10px 0; padding: 15px; background: linear-gradient(45deg, #3498db, #2ecc71); border: none; border-radius: 10px; color: white; font-size: 1em; text-align: left; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .comm-option:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .comm-option.correct { background: linear-gradient(45deg, #27ae60, #2ecc71); } .comm-option.incorrect { background: linear-gradient(45deg, #e74c3c, #c0392b); } #retry-timing { background: #f39c12; color: white; border: none; padding: 10px 20px; border-radius: 10px; font-size: 1em; cursor: pointer; } .seq-btn { margin: 5px; padding: 10px 20px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background 0.3s; } .seq-btn:hover { background: #2980b9; } .seq-btn.correct { background: #27ae60; } .seq-btn.incorrect { background: #e74c3c; } #timer-display { font-size: 2em; font-weight: bold; margin: 20px 0; color: #FFD700; } #timer-click { background: #e74c3c; color: white; border: none; padding: 15px 25px; border-radius: 10px; font-size: 1.1em; cursor: pointer; } .feedback { margin: 10px 0; padding: 10px; border-radius: 5px; font-weight: bold; } .feedback.success { background: rgba(39, 174, 96, 0.3); color: #27ae60; } .feedback.error { background: rgba(231, 76, 60, 0.3); color: #e74c3c; } .completion-container { text-align: center; background: rgba(255,255,255,0.15); padding: 30px; border-radius: 20px; border: 3px solid #FFD700; box-shadow: 0 15px 35px rgba(0,0,0,0.4); animation: glow 2s ease-in-out infinite alternate; backdrop-filter: blur(10px); } .completion-container h3 { color: #FFD700; font-size: 1.8em; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .completion-container p { font-size: 1.2em; margin-bottom: 25px; opacity: 0.9; } .final-actions { margin-top: 25px; } .cfg-reminder { background: rgba(255,255,255,0.1); padding: 20px; border-radius: 15px; margin-bottom: 20px; border: 2px solid rgba(255,215,0,0.3); } .cfg-reminder p { margin-bottom: 15px; font-size: 1.1em; } .cfg-final-link { display: inline-block; background: linear-gradient(45deg, #4ECDC4, #44A08D); color: white; text-decoration: none; padding: 12px 24px; border-radius: 25px; font-weight: bold; transition: transform 0.2s, box-shadow 0.2s; border: 2px solid rgba(255,255,255,0.3); margin-bottom: 10px; } .cfg-final-link:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); } .back-to-trials-btn { display: inline-block; } .back-to-trials-btn a { display: inline-block; background: linear-gradient(45deg, #FF6B6B, #4ECDC4); color: white; font-size: 1.3em; font-weight: bold; padding: 15px 30px; border-radius: 25px; text-decoration: none; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: transform 0.3s ease; border: 3px solid rgba(255,255,255,0.3); } .back-to-trials-btn a:hover { transform: scale(1.05) translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); } @keyframes glow { 0% { box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 0 20px rgba(255,215,0,0.3); } 100% { box-shadow: 0 15px 35px rgba(0,0,0,0.4), 0 0 40px rgba(255,215,0,0.6); } } @media (max-width: 768px) { #internship-container { padding: 15px; margin: 10px; } .highlight-item { flex-direction: column; text-align: center; } .highlight-icon { margin-bottom: 5px; } } </style> <script> $(document).ready(function() { let gameState = { commSkill: 0, techSkill: 0, leadSkill: 0, currentChallenge: 0, challenges: ['comm', 'tech', 'lead'], sequenceStep: 0, timerSeconds: 0, timerInterval: null, completedChallenges: [] }; function markChallengeCompleted(skill) { // Add to completed list if (!gameState.completedChallenges.includes(skill)) { gameState.completedChallenges.push(skill); } // Update button appearance $(`.option-btn[data-skill="${skill}"]`) .removeClass('active-challenge') .addClass('completed') .prop('disabled', true); // Store in Twine variables if available if (typeof State !== 'undefined' && State.variables) { if (skill === 'comm') State.variables.commSkill = gameState.commSkill; if (skill === 'tech') State.variables.techSkill = gameState.techSkill; if (skill === 'lead') State.variables.leadSkill = gameState.leadSkill; } } function resetTaskStates() { // Reset communication challenge $('.comm-option').removeClass('correct incorrect').prop('disabled', false); $('#typing-feedback').empty(); // Reset sequence challenge $('.seq-btn').removeClass('correct incorrect'); $('#sequence-feedback').empty(); gameState.sequenceStep = 0; // Reset timing challenge clearInterval(gameState.timerInterval); $('#timer-display').text('00:00'); $('#timing-feedback').empty(); $('#retry-timing').hide(); gameState.timerSeconds = 0; } function showChallenge(type) { // Hide all task game elements first $('#task-game, #task-game > div').hide(); $('#challenge-options').show(); // Reset all task states resetTaskStates(); const challenges = { 'comm': { title: '💼 Communication Challenge', desc: 'Master professional communication skills!' }, 'tech': { title: '⚡ Technical Challenge', desc: 'Solve technical problems efficiently!' }, 'lead': { title: '👥 Leadership Challenge', desc: 'Demonstrate leadership and teamwork!' } }; const challenge = challenges[type]; $('#challenge-title').text(challenge.title); $('#challenge-description').text(challenge.desc); } function startTask(skill) { $('#challenge-options').hide(); $('#task-game').show(); // Hide all specific task divs first $('#task-game > div').hide(); if (skill === 'comm') { $('#typing-challenge').show(); } else if (skill === 'tech') { $('#sequence-challenge').show(); gameState.sequenceStep = 0; $('.seq-btn').removeClass('correct incorrect'); } else if (skill === 'lead') { $('#timing-challenge').show(); startTimer(); } } function startTimer() { gameState.timerSeconds = 0; gameState.timerInterval = setInterval(() => { gameState.timerSeconds++; const minutes = Math.floor(gameState.timerSeconds / 60); const seconds = gameState.timerSeconds % 60; $('#timer-display').text( String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0') ); }, 1000); } function completeChallenge(skill, points) { gameState[skill + 'Skill'] += points; markChallengeCompleted(skill); $('#task-game').hide(); // Check if all challenges are completed if (gameState.completedChallenges.length >= 3) { showCompletion(); } else { $('#next-challenge').show(); } } function showCompletion() { $('#challenge-card').hide(); $('#navigation').show(); } // Event Handlers $('#start-btn').click(function() { $(this).hide(); showChallenge('comm'); // Show first challenge }); $('.option-btn').click(function() { // Prevent clicking completed challenges if ($(this).hasClass('completed')) { return false; } const skill = $(this).data('skill'); startTask(skill); }); $('.comm-option').click(function() { const isCorrect = $(this).data('correct'); $('.comm-option').prop('disabled', true); if (isCorrect) { $(this).addClass('correct'); $('#typing-feedback').html('<div class="feedback success">Excellent! Professional and solution-oriented response! 🎉</div>'); setTimeout(() => completeChallenge('comm', 35), 1500); } else { $(this).addClass('incorrect'); $('.comm-option[data-correct="true"]').addClass('correct'); $('#typing-feedback').html('<div class="feedback error">Not quite right. The highlighted response shows better professionalism.</div>'); setTimeout(() => completeChallenge('comm', 15), 2500); } }); $('.seq-btn').click(function() { const expectedOrder = parseInt($(this).data('order')); gameState.sequenceStep++; if (expectedOrder === gameState.sequenceStep) { $(this).addClass('correct').removeClass('incorrect'); if (gameState.sequenceStep === 4) { $('#sequence-feedback').html('<div class="feedback success">Excellent problem-solving sequence! 🔧</div>'); setTimeout(() => completeChallenge('tech', 30), 1000); } } else { $(this).addClass('incorrect'); $('#sequence-feedback').html('<div class="feedback error">Wrong sequence! Try again.</div>'); setTimeout(() => { $('.seq-btn').removeClass('correct incorrect'); gameState.sequenceStep = 0; $('#sequence-feedback').empty(); }, 1500); } }); $('#timer-click').click(function() { clearInterval(gameState.timerInterval); const target = 10; // 10 seconds const difference = Math.abs(gameState.timerSeconds - target); if (difference <= 1) { $('#timing-feedback').html('<div class="feedback success">Perfect timing! Leadership skills demonstrated! 👏</div>'); setTimeout(() => completeChallenge('lead', 40), 1000); } else { $('#timing-feedback').html('<div class="feedback error">Close, but timing is crucial in leadership! Try again?</div>'); $('#retry-timing').show(); } }); $('#retry-timing').click(function() { $(this).hide(); $('#timing-feedback').empty(); startTimer(); }); $('#next-challenge').click(function() { $(this).hide(); // Reset title and description for selection $('#challenge-title').text('Choose Your Next Challenge'); $('#challenge-description').text('Select any available challenge to continue your training!'); $('#challenge-options').show(); $('#task-game').hide(); // Reset all task states resetTaskStates(); }); }); // Function for Twine integration function returnToTrials() { // For Twine/SugarCube integration if (typeof State !== 'undefined' && State.variables) { State.variables.industryProgress = State.variables.industryProgress || {}; State.variables.industryProgress.internshipComplete = true; // Navigate back to Industry Trials passage if (typeof Engine !== 'undefined' && Engine.play) { Engine.play('Industry Trials'); } } else { // Fallback for standalone version alert('Training complete! In the full game, this would return you to the Industry Trials.'); } } </script>

<<set $name = "Hero">> <div id="gameplay-screen"> <p class="gameplay-intro"> The world is full of challenges, but you have great potential!<br> To awaken your true powers, you must first root yourself in knowledge and strength. Every skill you master and every lesson you learn will level you up — boosting your wisdom, courage, and resilience. These stats are your weapons, your armor, and your shield in the battle ahead.<br><br> Only by increasing your knowledge, sharpening your skills, and strengthening your spirit can you face the final boss — the dreaded <strong>Monster of Doubt & Fear</strong> — and claim your victory.<br><br> Prepare yourself well, Hero. <br> The journey to your Path of Purpose begins now! </p> <div class="gameplay-btn-container"> <<link "⚔️ Begin Your Journey">> <<script>> window.playSound("button", 0.5); <</script>> <<goto "Power Awakening">> <</link>> </div> </div> <style> #gameplay-screen { max-width: 700px; margin: 40px auto; padding: 30px; background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%); border-radius: 20px; color: white; text-align: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px); animation: glowFade 2s ease-in-out infinite alternate; } .gameplay-intro { font-size: 1.0em; /* smaller font size */ line-height: 1.0em; /* tighter line spacing */ margin-bottom: 20px; /* less space below */ text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); opacity: 0.95; } .gameplay-btn-container a { display: inline-block; background: linear-gradient(45deg, #FFD700, #FFA500); color: #333; font-weight: bold; font-size: 1.2em; padding: 15px 35px; border-radius: 25px; text-decoration: none; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); border: 3px solid rgba(255,255,255,0.3); box-shadow: 0 6px 20px rgba(0,0,0,0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; } .gameplay-btn-container a:hover { transform: scale(1.05); box-shadow: 0 10px 25px rgba(0,0,0,0.4); } @keyframes glowFade { 0% { box-shadow: 0 0 20px rgba(255,255,255,0.15); } 100% { box-shadow: 0 0 35px rgba(255,255,255,0.3); } } </style>

<div id="gameplay-screen"> <h4>The Mentor's Guidance (Career Advisory—coaching & clinics)</h4> <div class="mentor-intro"> <img src="mentor.png" alt="Mentor" class="mentor-img"> <div class="mentor-text"> A wise Mentor appears. He says:<br> <strong>"To sharpen your skills, you need advice and coaching. Will you undertake individual training or join the thematic career clinics?"</strong> </div> </div> <p class="choose-text">Choose your training:</p> <div class="training-options"> <div class="training-card" onclick="window.playSound('button', 0.5);SugarCube.Engine.play('Group Coaching')"> <div class="training-icon">👥</div> <div class="training-text">Group Coaching</div> </div> <div class="training-card" onclick="window.playSound('button', 0.5);SugarCube.Engine.play('Individual Coaching')"> <div class="training-icon">🎯</div> <div class="training-text">Individual Coaching</div> </div> </div> </div> <style> #gameplay-screen { margin: 20px auto; padding: 20px 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 18px; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); text-align: center; backdrop-filter: blur(8px); } #gameplay-screen h4 { color: #FFD700; font-size: 1.3em; margin-bottom: 15px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } .mentor-intro { font-size: 1.15em; line-height: 1.5em; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 15px; } .choose-text { font-size: 1.1em; font-weight: 600; color: #FFD700; margin-bottom: 25px; } .training-options { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; width: 750px; margin: 0 auto; } .training-card { background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 15px; padding: 25px 20px; min-width: 180px; flex: 1; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); backdrop-filter: blur(5px); } .training-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5); } .training-card:active { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .training-icon { font-size: 3em; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .training-text { font-size: 1.1em; font-weight: 600; text-align: center; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); line-height: 1.3; } /* Pulse animation */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulsing { animation: pulse 1.5s infinite; } .mentor-intro { display: flex; align-items: flex-start; gap: 15px; justify-content: center; font-size: 1.15em; line-height: 1.5em; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 15px; } .mentor-img { flex-shrink: 0; width: 250px; height: 250px; /* make height equal to width for perfect circle */ border-radius: 50%; /* circle crop */ border: 3px solid rgba(255, 255, 255, 0.3); object-fit: cover; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .mentor-text { max-width: 600px; } /* On small screens, stack vertically */ @media (max-width: 480px) { .mentor-intro { flex-direction: column; align-items: center; text-align: center; } .mentor-text { max-width: 100%; } } /* Responsive design */ @media (max-width: 480px) { .training-options { flex-direction: column; align-items: center; } .training-card { max-width: 200px; width: 100%; } } </style> <script> if (typeof inactivityTimer === 'undefined') { var inactivityTimer; } var trainingCards = trainingCards || document.querySelectorAll('.training-card'); function startPulse() { trainingCards.forEach(card => card.classList.add('pulsing')); } function stopPulse() { trainingCards.forEach(card => card.classList.remove('pulsing')); } function resetInactivityTimer() { clearTimeout(inactivityTimer); stopPulse(); inactivityTimer = setTimeout(startPulse, 3000); } // Reset timer on any user interaction ['mousemove', 'keydown', 'click', 'touchstart'].forEach(evt => { document.addEventListener(evt, resetInactivityTimer); }); // Start the timer initially resetInactivityTimer(); </script>

<div id="gameplay-screen"> <div class="intro-section"> <div class="elder-image"> <img src="elder.png" alt="Elder of Roots & Wings"> </div> <div class="intro-content"> <p class="gameplay-intro"> You encounter the <strong>Elder of Roots & Wings</strong>. He says:<br> <strong>"Before any battle, you need strength—your financial wellbeing, personal growth, and a global perspective."</strong> </p> </div> </div> <h3 class="section-heading">⚡ Choose a Power to Train With:</h3> <div class="power-list"> <div class="power-item <<if $learnedCareerGroup>>learned<</if>>" onclick="window.playSound('button', 0.5); SugarCube.Engine.play('Career Catalyst')"> <div class="power-icon"><img src="career-catalyst.png" alt="Career Catalyst"></div> <div class="power-content"> <span class="power-name">Career Catalyst</span> <span class="status-text"><<if $learnedCareerGroup>>✔ Learned<</if>></span> </div> </div> <div class="power-item <<if $learnedFinancial>>learned<</if>>" onclick="window.playSound('button', 0.5); SugarCube.Engine.play('Financial')"> <div class="power-icon"><img src="financial-wellbeing.png" alt="Financial Wellbeing"></div> <div class="power-content"> <span class="power-name">Financial Wellbeing</span> <span class="status-text"><<if $learnedFinancial>>✔ Learned<</if>></span> </div> </div> <div class="power-item <<if $learnedGlobal>>learned<</if>>" onclick="window.playSound('button', 0.5); SugarCube.Engine.play('Global Insights')"> <div class="power-icon"><img src="global-insights.png" alt="Global Industry Insights"></div> <div class="power-content"> <span class="power-name">Global Industry Insights</span> <span class="status-text"><<if $learnedGlobal>>✔ Learned<</if>></span> </div> </div> <div class="power-item <<if $learnedRoots>>learned<</if>>" onclick="window.playSound('button', 0.5); SugarCube.Engine.play('Roots and Wings')"> <div class="power-icon"><img src="roots-wings.png" alt="Roots & Wings"></div> <div class="power-content"> <span class="power-name">Roots & Wings</span> <span class="status-text"><<if $learnedRoots>>✔ Learned<</if>></span> </div> </div> </div> <<if $learnedRoots and $learnedFinancial and $learnedGlobal and $learnedCareerGroup>> <div class="mentor-link"> <div class="mentor-button" onclick="window.playSound('button', 0.5); SugarCube.Engine.play('Mentor Guidance')"> <div class="mentor-icon">🧙‍♂️</div> <span>Next: Find Your Mentor</span> </div> </div> <<else>> <p class="warning-text">⚠️ <em>You need to learn all four powers before you can proceed.</em></p> <</if>> </div> <style> #gameplay-screen { max-width: 750px; margin: 20px auto; padding: 20px 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 18px; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); text-align: center; backdrop-filter: blur(8px); } /* Remove vertical margins inside gameplay screen */ #gameplay-screen > * { margin-top: 0 !important; margin-bottom: 0 !important; } .intro-section { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; } .elder-image { flex-shrink: 0; } .elder-image img { width: 300px; height: 300px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); object-fit: cover; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .intro-content { flex: 1; text-align: left; } .gameplay-intro { font-size: 1.15em; line-height: 1.5em; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); margin: 0; } .section-heading { color: #FFD700; font-size: 1.2em; margin-bottom: 20px; } .power-list { max-width: 600px; margin: 0 auto 20px; padding:0 } .power-item { background: rgba(255, 255, 255, 0.15); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 10px; padding: 12px 16px; margin-bottom: 0px; color: white; font-size: 1.05em; display: flex; align-items: center; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); } .power-item:hover { transform: translateY(-2px); box-shadow: 0 8px 15px rgba(0,0,0,0.3); } .power-item.learned { background: rgba(39, 174, 96, 0.25); border-color: #27ae60; box-shadow: 0 0 12px rgba(39, 174, 96, 0.4); } .power-icon { font-size: 1.5em; margin-right: 15px; min-width: 40px; display: flex; align-items: center; justify-content: center; } .power-icon img { width: 60px; height: 60px; object-fit: contain; } .power-content { flex: 1; display: flex; justify-content: space-between; align-items: center; } .power-name { font-weight: 600; } .status-text { font-weight: bold; color: #2ecc71; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } .mentor-link { margin-top: 18px; } .mentor-button { display: inline-flex; align-items: center; background: linear-gradient(45deg, #FFD700, #FFA500); color: #333; font-size: 1.1em; font-weight: bold; padding: 12px 24px; border-radius: 22px; text-decoration: none; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: transform 0.2s ease; cursor: pointer; } .mentor-button:hover { transform: scale(1.04); box-shadow: 0 8px 20px rgba(0,0,0,0.4); } .mentor-icon { margin-right: 8px; font-size: 1.2em; } .mentor-icon img { width: 24px; height: 24px; object-fit: contain; } .warning-text { color: #f39c12; font-style: italic; margin-top: 15px; font-size: 1em; } /* Additional styling for better interaction */ .power-item:active { transform: translateY(0px); box-shadow: 0 2px 5px rgba(0,0,0,0.3); } .mentor-button:active { transform: scale(0.98); } /* Responsive design for smaller screens */ @media (max-width: 600px) { .intro-section { flex-direction: column; text-align: center; } .intro-content { text-align: center; } .elder-image img { width: 100px; height: 100px; } } </style>

<<if !$q1 or !$q2 or !$q3>><<set $q1 = "">><<set $q2 = "">><<set $q3 = "">><</if>><div class="content-container"><div class="page-header"><img src="roots-wings.png" alt="Roots & Wings" class="page-logo"><h2>Roots & Wings 2.0</h2></div><p><em>Equip yourself with crucial soft skills to thrive in a fast-changing and complex world.</em></p><p><strong>Roots & Wings 2.0</strong> is a series of 1-unit, activity-based courses focused on personal growth, resilience, and interpersonal effectiveness.</p><p>💡 Learn more here: <a href="https://nus.edu.sg/cfg/students/career-ready/life-skills/roots-and-wings" target="_blank">Roots and Wings</a></p><hr><h3>🧠 Training Quiz</h3><p>Answer the following questions to complete your training. You may need to visit the website above.</p><strong>1. Who offers the Roots & Wings 2.0 programme?</strong><br><<radiobutton "$q1" "Department of Mathematics">> Department of Mathematics<br><<radiobutton "$q1" "Department of Psychology">> Department of Psychology<br><<radiobutton "$q1" "School of Computing">> School of Computing<br><<radiobutton "$q1" "School of Business">> School of Business<br><br><strong>2. How many Unrestricted Elective (UE) units can a student accumulate through the programme?</strong><br><<radiobutton "$q2" "3">> 3 Units<br><<radiobutton "$q2" "5">> 5 Units<br><<radiobutton "$q2" "2">> 2 Units<br><<radiobutton "$q2" "1">> 1 Unit<br><br><strong>3. Which of the following is an actual course in the Roots & Wings programme?</strong><br><<radiobutton "$q3" "PLS8003 Cultivating Resilience">> PLS8003 Cultivating Resilience<br><<radiobutton "$q3" "PLS8010 Leadership Skills">> PLS8010 Leadership Skills<br><<radiobutton "$q3" "RW1001 Emotional Agility">> RW1001 Emotional Agility<br><<radiobutton "$q3" "FAS2000 Mental Strength">> FAS2000 Mental Strength<br><br><div id="quiz-message"></div><div id="quiz-button"><div class="custom-button" onclick="checkRootsAnswers()">Submit Answers</div></div><br><br><br></div> <<script>> window.checkRootsAnswers = function() { let wrongCount = 0; let wrongMsg = ""; if (variables().q1 !== "Department of Psychology") { wrongCount += 1; wrongMsg += "<p>❌ Question 1 is incorrect. </p>"; } if (variables().q2 !== "5") { wrongCount += 1; wrongMsg += "<p>❌ Question 2 is incorrect. </p>"; } if (variables().q3 !== "PLS8003 Cultivating Resilience") { wrongCount += 1; wrongMsg += "<p>❌ Question 3 is incorrect. </p>"; } if (wrongCount === 0) { variables().learnedRoots = true; variables().strength += 6; if (typeof updateStatBoard === 'function') { updateStatBoard(); } document.getElementById("quiz-message").innerHTML = "<p><strong>✅ Training complete!</strong> You gain <strong>+6 Strength</strong>.</p>" + "<p>You've unlocked self-awareness, resilience, and collaborative power!</p>"; document.getElementById("quiz-button").innerHTML = '<a href="javascript:void(0)" onclick="SugarCube.Engine.play(\'Power Awakening\')" class="return-link">Return to Power Awakening</a><br><br><br>'; } else { document.getElementById("quiz-message").innerHTML = "<p><span style=\"color: red;\">❌ You got <strong>" + wrongCount + "</strong> question(s) wrong. Unsure? Check back to the URL above!</span></p>" + wrongMsg; } }; <</script>> <style> .page-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; justify-content: center; } .page-logo { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; } .page-header h2 { margin: 0; } .custom-button { background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%); color: #1a202c; /* Dark text for contrast */ padding: 12px 24px; border-radius: 8px; cursor: pointer; display: inline-block; font-weight: 600; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border: none; font-size: 16px; min-width: 140px; } .custom-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, #f6a440 0%, #dd6b20 100%); } .custom-button:active { transform: translateY(0px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .return-link { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; display: inline-block; font-weight: 600; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); min-width: 140px; } .return-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, #38a169 0%, #2f855a 100%); color: white; text-decoration: none; } </style>

<div id="intro-screen"> <<set $name = "Hero">> <h1 style="flex: 0.1;">⚔️ Path of Purpose: CFG Career Quest ⚔️</h1><h2 style="flex: 0.1;">Welcome, <<print $name>></h2><video width="640" height="300" autoplay muted loop><source src="intro.mp4" type="video/mp4">Your browser does not support the video tag.</video><div class="button-group"> <<link "🎬 Credits">> <<script>> if (document.getElementById("bgm")) { document.getElementById("bgm").play().catch(e => console.warn("Play failed:", e)); } <</script>> <<goto "Credits">> <</link>> <<link "▶ Play">> <<script>> if (document.getElementById("bgm")) { document.getElementById("bgm").play().catch(e => console.warn("Play failed:", e)); } <</script>> <<goto "Intro">> <</link>> </div> </div> <style> #intro-screen { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } #intro-screen video { margin-bottom: 20px; } </style>

<<silently>> <<set $playerHP = 100>> <<set $monsterHP = 100>> <<set $strength =0>> <<set $financial = 0>> <<set $networking = 0>> <<set $careerReadiness = 0>> <<set $techSkills = 0>>  <<if typeof $industryProgress === "undefined">> <<set $industryProgress = { internshipComplete: false, careerPrepComplete: false }>> <</if>> <<if typeof $commSkill === "undefined">><<set $commSkill = 0>><</if>> <<if typeof $techSkill === "undefined">><<set $techSkill = 0>><</if>> <<if typeof $leadSkill === "undefined">><<set $leadSkill = 0>><</if>> <<if typeof $careerSkill === "undefined">><<set $careerSkill = 0>><</if>> <<if typeof $industrySkills === "undefined">> <<set $industrySkills = { communication: 0, technical: 0, leadership: 0, careerReadiness: 0 }>> <</if>> <</silently>>

<div id="gameplay-screen"><h2>Congratulations, Hero! </h2> <p>You have become a Warrior, an enlightened one. The Monster of Doubt and Fear has been defeated. You have mastered all pillars of power and completed the Path of Purpose: CFG Career Quest. Your journey is just beginning beyond this. </p> <p>The Elder of Roots and Wings and Mentor reappears and offers their parting words of advice:</p><div class="advisors"> <img src="elder.png" alt="Elder giving advice" class="advisor-img"> <img src="mentor.png" alt="Mentor giving advice" class="advisor-img"><em>Never stop learning. The world awaits your next move.</em> </div><p><strong>💼 Ready for the next quest?</strong><br> The <a href="https://nus.edu.sg/cfg" target="_blank">NUS Centre for Future-ready Graduates (CFG)</a> is here to guide you beyond the University. Learn career skills, build your personal brand, and gain real-world experience to prepare for your future.<br> </p><div class="victory-button-container"><<button "⚔️ Play Again ⚔️">><<run Engine.restart()>><</button>> </div> </div> <style> #gameplay-screen { margin: 20px auto; padding: 20px 60px; max-width: 900px; /* <-- constrain width */ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 18px; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35); text-align: center; backdrop-filter: blur(8px); } #gameplay-screen h2 { color: #FFD700; font-size: 1.8em; margin-bottom: 15px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } #gameplay-screen p { font-size: 1.15em; line-height: 1.6em; margin-bottom: 15px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } #gameplay-screen a { color: yellow; text-decoration: underline; } #gameplay-screen a:hover { color: black; } /* Advisor image section */ .advisors { display: flex; justify-content: center; gap: 20px; margin: 20px 0; flex-wrap: wrap; } .advisor-img { flex-shrink: 0; width: 200px; height: 200px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.3); object-fit: cover; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease; } /* Victory button styling */ .victory-button-container { margin-top: 30px; text-align: center; } #gameplay-screen .macro-button { display: inline-block !important; padding: 15px 40px !important; background: linear-gradient(45deg, #3498db, #2980b9) !important; color: white !important; text-decoration: none !important; border-radius: 50px !important; font-size: 1.3em !important; font-weight: bold !important; text-transform: uppercase !important; letter-spacing: 1px !important; box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4) !important; transition: all 0.3s ease !important; border: 2px solid transparent !important; cursor: pointer !important; position: relative !important; overflow: hidden !important; margin: 0 !important; } /* Shimmer effect */ #gameplay-screen .macro-button:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: left 0.5s; } #gameplay-screen .macro-button:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 35px rgba(52, 152, 219, 0.6) !important; background: linear-gradient(45deg, #2980b9, #3498db) !important; border-color: rgba(255, 255, 255, 0.4) !important; } #gameplay-screen .macro-button:hover:before { left: 100%; } #gameplay-screen .macro-button:active { transform: translateY(-1px) !important; } </style>

<<if !$cq1 or !$cq2 or !$cq3>><<set $cq1 = "">><<set $cq2 = "">><<set $cq3 = "">><</if>><div class="content-container"><div class="page-header"><img src="career-catalyst.png" alt="Career Catalyst" class="page-logo"><h2>Career Catalyst (CFG1002)</h2></div><p><em>Learn the most in-demand career skills to prepare for internships and future work.</em></p><p>Kick-start your career preparation with CFG’s <strong>Career Catalyst.</strong></p><p>💡 Learn more: <a href="https://nus.edu.sg/cfg/students/career-ready/career-skills" target="_blank">Career Catalyst Course Page</a></p><hr><h3>🧠 Training Quiz</h3><p>Answer the following to complete your Career Catalyst training.</p><strong>1. How many Unrestricted Elective (UE) units is CFG1002 Career Catalyst worth?</strong><br><<radiobutton "$cq1" "1">> 1 Unit<br><<radiobutton "$cq1" "2">> 2 Units<br><<radiobutton "$cq1" "3">> 3 Units<br><<radiobutton "$cq1" "4">> 4 Units<br><br><strong>2. Which of the following is NOT listed as a focus area of CFG1002?</strong><br><<radiobutton "$cq2" "Adaptability">> Adaptability<br><<radiobutton "$cq2" "Emotional Agility">> Emotional Agility<br><<radiobutton "$cq2" "Communication">> Communication<br><<radiobutton "$cq2" "Collaboration">> Collaboration<br><br><strong>3. What type of learning format is CFG1002 offered in?</strong><br><<radiobutton "$cq3" "Self-paced online course">> Hybrid in person classes and online e-learning<br><<radiobutton "$cq3" "Live weekly webinars">> Live weekly webinars<br><<radiobutton "$cq3" "In-person classes">> In-person classes<br><<radiobutton "$cq3" "Hybrid seminar and workshops">> Self-paced online course<br><br><div id="career-quiz-message"></div><div id="career-quiz-button"><div class="custom-button" onclick="checkAnswers()">Submit Answers</div></div><br><br><br></div> <<script>> window.checkAnswers = function() { let wrongCount = 0; let wrongMsg = ""; if (variables().cq1 !== "2") { wrongCount += 1; wrongMsg += "<p>❌ Question 1 is incorrect. </p>"; } if (variables().cq2 !== "Emotional Agility") { wrongCount += 1; wrongMsg += "<p>❌ Question 2 is incorrect. </p>"; } if (variables().cq3 !== "Self-paced online course") { wrongCount += 1; wrongMsg += "<p>❌ Question 3 is incorrect. </p>"; } if (wrongCount === 0) { variables().learnedCareerGroup = true; variables().careerReadiness += 6; if (typeof updateStatBoard === 'function') { updateStatBoard(); } document.getElementById("career-quiz-message").innerHTML = "<p><strong>✅ Training complete!</strong> You gain <strong>+6 Career Readiness</strong>.</p>" + "<p>You've unlocked in-demand skills for your future career!</p>"; document.getElementById("career-quiz-button").innerHTML = '<a href="javascript:void(0)" onclick="SugarCube.Engine.play(\'Power Awakening\')" class="return-link">Return to Power Awakening</a><br><br><br>'; } else { document.getElementById("career-quiz-message").innerHTML = "<p><span style=\"color: red;\">❌ You got <strong>" + wrongCount + "</strong> question(s) wrong. Unsure? Check back to the URL above! </span> </p>" + wrongMsg; } }; <</script>> <style> .page-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; justify-content:center } .page-logo { width: 100px; height: 100px; object-fit: contain; flex-shrink: 0; } .page-header h2 { margin: 0; } .custom-button { background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%); color: #1a202c; /* Dark text for contrast */ padding: 12px 24px; border-radius: 8px; cursor: pointer; display: inline-block; font-weight: 600; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border: none; font-size: 16px; min-width: 140px; } .custom-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, #f6a440 0%, #dd6b20 100%); } .custom-button:active { transform: translateY(0px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .return-link { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%); color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; display: inline-block; font-weight: 600; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); min-width: 140px; } .return-link:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); background: linear-gradient(135deg, #38a169 0%, #2f855a 100%); color: white; text-decoration: none; } </style>