Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EXCEL Values | VinUniversity</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-dark: #1e3a5f; | |
| --primary-blue: #2563eb; | |
| --accent-red: #dc2626; | |
| --light-gray: #f3f4f6; | |
| --white: #ffffff; | |
| --text-dark: #1f2937; | |
| --text-light: #6b7280; | |
| --border-light: #e5e7eb; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; | |
| line-height: 1.6; | |
| color: var(--text-dark); | |
| background: var(--white); | |
| } | |
| /* Header Navigation */ | |
| header { | |
| background: var(--white); | |
| border-bottom: 1px solid var(--border-light); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); | |
| } | |
| .header-container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 40px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| height: 70px; | |
| } | |
| .logo { | |
| font-size: 20px; | |
| font-weight: 700; | |
| color: var(--primary-dark); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .logo-icon { | |
| width: 32px; | |
| height: 32px; | |
| background: var(--primary-dark); | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--white); | |
| font-weight: bold; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: linear-gradient(135deg, var(--primary-dark) 0%, #2d5a8c 100%); | |
| color: var(--white); | |
| padding: 80px 40px; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 400px; | |
| height: 400px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 50%; | |
| transform: translate(100px, -100px); | |
| } | |
| .hero::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 300px; | |
| height: 300px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 50%; | |
| transform: translate(-100px, 100px); | |
| } | |
| .hero-content { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero h1 { | |
| font-size: 48px; | |
| font-weight: 700; | |
| margin-bottom: 20px; | |
| line-height: 1.2; | |
| } | |
| .hero-subtitle { | |
| font-size: 18px; | |
| color: rgba(255, 255, 255, 0.9); | |
| margin-bottom: 30px; | |
| font-weight: 300; | |
| } | |
| .hero-highlight { | |
| display: inline-block; | |
| background: var(--accent-red); | |
| color: var(--white); | |
| padding: 8px 16px; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| font-size: 14px; | |
| margin-top: 20px; | |
| } | |
| /* Container */ | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 40px; | |
| } | |
| /* Tabs Navigation */ | |
| .tabs-nav { | |
| display: flex; | |
| gap: 0; | |
| border-bottom: 2px solid var(--border-light); | |
| margin: 60px 0 40px 0; | |
| padding: 0 40px; | |
| margin-left: -40px; | |
| margin-right: -40px; | |
| padding-left: 40px; | |
| padding-right: 40px; | |
| } | |
| .tab-btn { | |
| padding: 16px 24px; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-light); | |
| cursor: pointer; | |
| font-size: 15px; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| border-bottom: 3px solid transparent; | |
| margin-bottom: -2px; | |
| position: relative; | |
| } | |
| .tab-btn:hover { | |
| color: var(--primary-blue); | |
| } | |
| .tab-btn.active { | |
| color: var(--primary-blue); | |
| border-bottom-color: var(--primary-blue); | |
| } | |
| /* Tab Content */ | |
| .tab-content { | |
| display: none; | |
| animation: fadeIn 0.4s ease; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Overview Section */ | |
| .overview-content { | |
| background: var(--light-gray); | |
| padding: 40px; | |
| border-radius: 12px; | |
| margin-bottom: 40px; | |
| } | |
| .overview-content h2 { | |
| color: var(--primary-dark); | |
| font-size: 28px; | |
| margin-bottom: 20px; | |
| } | |
| .overview-content p { | |
| color: var(--text-light); | |
| margin-bottom: 16px; | |
| line-height: 1.8; | |
| font-size: 15px; | |
| } | |
| .overview-list { | |
| background: var(--white); | |
| padding: 30px; | |
| border-radius: 8px; | |
| margin-top: 20px; | |
| } | |
| .overview-list li { | |
| margin-bottom: 12px; | |
| color: var(--text-dark); | |
| font-weight: 500; | |
| } | |
| .overview-list strong { | |
| color: var(--primary-blue); | |
| } | |
| /* Values Grid */ | |
| .values-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 30px; | |
| margin-bottom: 60px; | |
| } | |
| .value-card { | |
| background: var(--white); | |
| border: 1px solid var(--border-light); | |
| border-radius: 12px; | |
| padding: 40px 30px; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .value-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, var(--primary-blue), var(--accent-red)); | |
| } | |
| .value-card:hover { | |
| border-color: var(--primary-blue); | |
| box-shadow: 0 12px 24px rgba(37, 99, 235, 0.1); | |
| transform: translateY(-4px); | |
| } | |
| /* Diamond Shape for Value Letter */ | |
| .value-diamond { | |
| width: 80px; | |
| height: 80px; | |
| background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-blue) 100%); | |
| transform: rotate(45deg); | |
| margin: 0 auto 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 12px rgba(30, 58, 95, 0.2); | |
| } | |
| .value-letter { | |
| font-size: 40px; | |
| font-weight: 700; | |
| color: var(--white); | |
| transform: rotate(-45deg); | |
| } | |
| .value-title { | |
| font-size: 20px; | |
| font-weight: 700; | |
| color: var(--primary-dark); | |
| margin-bottom: 12px; | |
| } | |
| .value-description { | |
| color: var(--text-light); | |
| font-size: 14px; | |
| line-height: 1.7; | |
| margin-bottom: 20px; | |
| } | |
| .value-details { | |
| background: var(--light-gray); | |
| padding: 16px; | |
| border-radius: 8px; | |
| font-size: 13px; | |
| color: var(--text-dark); | |
| text-align: left; | |
| } | |
| .value-details ul { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .value-details li { | |
| padding: 6px 0; | |
| padding-left: 20px; | |
| position: relative; | |
| } | |
| .value-details li::before { | |
| content: '→'; | |
| position: absolute; | |
| left: 0; | |
| color: var(--primary-blue); | |
| font-weight: bold; | |
| } | |
| /* Quiz Section */ | |
| .quiz-section { | |
| margin-top: 60px; | |
| } | |
| .quiz-header { | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .quiz-header h2 { | |
| font-size: 32px; | |
| color: var(--primary-dark); | |
| margin-bottom: 12px; | |
| } | |
| .quiz-header p { | |
| color: var(--text-light); | |
| font-size: 16px; | |
| } | |
| .progress-container { | |
| margin-bottom: 30px; | |
| } | |
| .progress-bar { | |
| background: var(--border-light); | |
| height: 6px; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| margin-bottom: 8px; | |
| } | |
| .progress-fill { | |
| background: linear-gradient(90deg, var(--primary-blue), var(--accent-red)); | |
| height: 100%; | |
| width: 0%; | |
| transition: width 0.3s ease; | |
| border-radius: 10px; | |
| } | |
| .progress-text { | |
| font-size: 13px; | |
| color: var(--text-light); | |
| font-weight: 500; | |
| } | |
| .quiz-container { | |
| background: var(--white); | |
| border: 1px solid var(--border-light); | |
| padding: 32px; | |
| border-radius: 12px; | |
| margin-bottom: 24px; | |
| transition: all 0.3s ease; | |
| } | |
| .quiz-container:hover { | |
| border-color: var(--primary-blue); | |
| box-shadow: 0 4px 12px rgba(37, 99, 235, 0.05); | |
| } | |
| .question { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--primary-dark); | |
| margin-bottom: 20px; | |
| } | |
| .question-number { | |
| color: var(--primary-blue); | |
| font-weight: 700; | |
| } | |
| .options { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .option { | |
| display: flex; | |
| align-items: flex-start; | |
| padding: 14px 16px; | |
| border: 2px solid var(--border-light); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| background: var(--white); | |
| } | |
| .option:hover { | |
| border-color: var(--primary-blue); | |
| background: rgba(37, 99, 235, 0.02); | |
| } | |
| .option input[type="radio"] { | |
| margin-right: 12px; | |
| margin-top: 2px; | |
| cursor: pointer; | |
| width: 18px; | |
| height: 18px; | |
| accent-color: var(--primary-blue); | |
| flex-shrink: 0; | |
| } | |
| .option label { | |
| cursor: pointer; | |
| flex: 1; | |
| font-size: 15px; | |
| color: var(--text-dark); | |
| } | |
| .option.correct { | |
| border-color: #10b981; | |
| background: rgba(16, 185, 129, 0.05); | |
| } | |
| .option.incorrect { | |
| border-color: var(--accent-red); | |
| background: rgba(220, 38, 38, 0.05); | |
| } | |
| /* Feedback */ | |
| .feedback { | |
| margin-top: 16px; | |
| padding: 14px 16px; | |
| border-radius: 8px; | |
| display: none; | |
| font-weight: 500; | |
| font-size: 14px; | |
| border-left: 4px solid transparent; | |
| } | |
| .feedback.show { | |
| display: block; | |
| } | |
| .feedback.correct { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: #059669; | |
| border-left-color: #10b981; | |
| } | |
| .feedback.incorrect { | |
| background: rgba(220, 38, 38, 0.1); | |
| color: #991b1b; | |
| border-left-color: var(--accent-red); | |
| } | |
| /* Buttons */ | |
| .button-group { | |
| display: flex; | |
| gap: 12px; | |
| margin-top: 30px; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| padding: 12px 28px; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 15px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary { | |
| background: var(--primary-blue); | |
| color: var(--white); | |
| } | |
| .btn-primary:hover { | |
| background: #1d4ed8; | |
| box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| background: var(--light-gray); | |
| color: var(--primary-dark); | |
| border: 2px solid var(--border-light); | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--primary-blue); | |
| background: rgba(37, 99, 235, 0.05); | |
| } | |
| /* Results */ | |
| .results { | |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| color: var(--white); | |
| padding: 40px; | |
| border-radius: 12px; | |
| text-align: center; | |
| margin-top: 30px; | |
| display: none; | |
| } | |
| .results.failed { | |
| background: linear-gradient(135deg, var(--accent-red) 0%, #991b1b 100%); | |
| } | |
| .results.show { | |
| display: block; | |
| animation: slideUp 0.4s ease; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .score { | |
| font-size: 56px; | |
| font-weight: 700; | |
| margin-bottom: 12px; | |
| } | |
| .score-text { | |
| font-size: 18px; | |
| margin-bottom: 16px; | |
| opacity: 0.95; | |
| } | |
| .results-message { | |
| font-size: 16px; | |
| line-height: 1.6; | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--primary-dark); | |
| color: var(--white); | |
| padding: 50px 40px; | |
| margin-top: 80px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .footer-content { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 40px; | |
| margin-bottom: 40px; | |
| } | |
| .footer-section h3 { | |
| font-size: 16px; | |
| font-weight: 700; | |
| margin-bottom: 16px; | |
| color: var(--white); | |
| } | |
| .footer-section p { | |
| font-size: 14px; | |
| color: rgba(255, 255, 255, 0.8); | |
| line-height: 1.8; | |
| margin-bottom: 12px; | |
| } | |
| .footer-links { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 10px; | |
| } | |
| .footer-links a { | |
| color: rgba(255, 255, 255, 0.8); | |
| text-decoration: none; | |
| font-size: 14px; | |
| transition: color 0.3s ease; | |
| } | |
| .footer-links a:hover { | |
| color: var(--white); | |
| } | |
| .footer-bottom { | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| padding-top: 30px; | |
| text-align: center; | |
| font-size: 13px; | |
| color: rgba(255, 255, 255, 0.6); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .header-container { | |
| padding: 0 20px; | |
| } | |
| .hero { | |
| padding: 50px 20px; | |
| } | |
| .hero h1 { | |
| font-size: 32px; | |
| } | |
| .container { | |
| padding: 0 20px; | |
| } | |
| .tabs-nav { | |
| padding: 0 20px; | |
| margin-left: -20px; | |
| margin-right: -20px; | |
| padding-left: 20px; | |
| padding-right: 20px; | |
| gap: 0; | |
| overflow-x: auto; | |
| } | |
| .tab-btn { | |
| padding: 12px 16px; | |
| font-size: 14px; | |
| white-space: nowrap; | |
| } | |
| .values-grid { | |
| grid-template-columns: 1fr; | |
| gap: 20px; | |
| } | |
| .value-card { | |
| padding: 30px 20px; | |
| } | |
| .quiz-container { | |
| padding: 20px; | |
| } | |
| .button-group { | |
| flex-direction: column; | |
| } | |
| .btn { | |
| width: 100%; | |
| } | |
| .footer-content { | |
| grid-template-columns: 1fr; | |
| gap: 30px; | |
| } | |
| } | |
| /* Utility Classes */ | |
| .text-center { | |
| text-align: center; | |
| } | |
| .mt-60 { | |
| margin-top: 60px; | |
| } | |
| .mb-40 { | |
| margin-bottom: 40px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="header-container"> | |
| <div class="logo"> | |
| <div class="logo-icon">V</div> | |
| VinUniversity | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="hero-content"> | |
| <h1>EXCEL Core Values</h1> | |
| <p class="hero-subtitle">Discover the five core values that define VinUniversity's mission and shape our graduates</p> | |
| <div class="hero-highlight">Developing Talents for the Future</div> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <div class="container"> | |
| <!-- Tabs Navigation --> | |
| <div class="tabs-nav"> | |
| <button class="tab-btn active" onclick="switchTab('overview')">Overview</button> | |
| <button class="tab-btn" onclick="switchTab('values')">The Five Values</button> | |
| <button class="tab-btn" onclick="switchTab('quiz')">Test Your Knowledge</button> | |
| </div> | |
| <!-- Overview Tab --> | |
| <div id="overview" class="tab-content active"> | |
| <div class="overview-content"> | |
| <h2>What is EXCEL?</h2> | |
| <p> | |
| EXCEL represents the five core values that VinUniversity has adopted to guide its educational mission and shape the character of its graduates. These values are not just aspirational ideals—they are actively integrated into every aspect of university life, from curriculum design to campus culture. | |
| </p> | |
| <p> | |
| Founded in 2019 and officially opened in October 2020, VinUniversity has established itself as a world-class institution committed to excellence. In September 2024, VinUni became the youngest and fastest university in the world to achieve QS 5 stars, earning recognition in 9 categories. By March 2025, the university achieved 100% FIBAA accreditation criteria—a first for any Vietnamese university. | |
| </p> | |
| <p> | |
| The EXCEL framework encompasses five essential attributes that every graduate is expected to embody: | |
| </p> | |
| <div class="overview-list"> | |
| <ul> | |
| <li><strong>E</strong> - Empathy: Sense other people's emotions, understand others without judgement</li> | |
| <li><strong>X</strong> - eXceptional Capability: Exceptional capabilities and competencies that are proven determinants of future success</li> | |
| <li><strong>C</strong> - Creativity: Perceive the world in new ways, make connections, generate solutions</li> | |
| <li><strong>E</strong> - Entrepreneurial Spirit: Overcome challenges, be decisive, accept responsibility, be impactful for society</li> | |
| <li><strong>L</strong> - Leadership Mindset: Motivate and influence people to act toward achieving a common goal</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Values Tab --> | |
| <div id="values" class="tab-content"> | |
| <div class="values-grid"> | |
| <!-- Empathy --> | |
| <div class="value-card"> | |
| <div class="value-diamond"> | |
| <div class="value-letter">E</div> | |
| </div> | |
| <div class="value-title">Empathy</div> | |
| <div class="value-description">Sense other people's emotions, understand others without judgement.</div> | |
| <div class="value-details"> | |
| <ul> | |
| <li>Emotional intelligence and awareness</li> | |
| <li>Compassionate understanding</li> | |
| <li>Non-judgmental perspective</li> | |
| <li>Building meaningful relationships</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Exceptional Capability --> | |
| <div class="value-card"> | |
| <div class="value-diamond"> | |
| <div class="value-letter">X</div> | |
| </div> | |
| <div class="value-title">eXceptional Capability</div> | |
| <div class="value-description">Exceptional capabilities and competencies that are proven determinants of future success.</div> | |
| <div class="value-details"> | |
| <ul> | |
| <li>Advanced skills development</li> | |
| <li>Academic excellence</li> | |
| <li>Professional competence</li> | |
| <li>Proven success indicators</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Creativity --> | |
| <div class="value-card"> | |
| <div class="value-diamond"> | |
| <div class="value-letter">C</div> | |
| </div> | |
| <div class="value-title">Creativity</div> | |
| <div class="value-description">Perceive the world in new ways, make connections, generate solutions.</div> | |
| <div class="value-details"> | |
| <ul> | |
| <li>Innovative thinking and approach</li> | |
| <li>Novel problem-solving methods</li> | |
| <li>Unique connections and insights</li> | |
| <li>Original and creative ideas</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Entrepreneurial Spirit --> | |
| <div class="value-card"> | |
| <div class="value-diamond"> | |
| <div class="value-letter">E</div> | |
| </div> | |
| <div class="value-title">Entrepreneurial Spirit</div> | |
| <div class="value-description">Overcome challenges, be decisive, accept responsibility, be impactful for society.</div> | |
| <div class="value-details"> | |
| <ul> | |
| <li>Resilience and adaptability</li> | |
| <li>Decisive action and initiative</li> | |
| <li>Accountability and responsibility</li> | |
| <li>Creating positive social impact</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Leadership Mindset --> | |
| <div class="value-card"> | |
| <div class="value-diamond"> | |
| <div class="value-letter">L</div> | |
| </div> | |
| <div class="value-title">Leadership Mindset</div> | |
| <div class="value-description">Motivate and influence people to act toward achieving a common goal.</div> | |
| <div class="value-details"> | |
| <ul> | |
| <li>Inspiring and motivating others</li> | |
| <li>Positive influence and impact</li> | |
| <li>Collaborative goal achievement</li> | |
| <li>Strategic vision and direction</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quiz Tab --> | |
| <div id="quiz" class="tab-content"> | |
| <div class="quiz-section"> | |
| <div class="quiz-header"> | |
| <h2>Test Your Knowledge</h2> | |
| <p>Challenge yourself with our interactive quiz about VinUniversity's EXCEL values</p> | |
| </div> | |
| <div class="progress-container"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| <div class="progress-text"><span id="answeredCount">0</span> of 5 questions answered</div> | |
| </div> | |
| <!-- Question 1 --> | |
| <div class="quiz-container"> | |
| <div class="question"><span class="question-number">1.</span> Which EXCEL value emphasizes understanding others without judgment?</div> | |
| <div class="options"> | |
| <label class="option"> | |
| <input type="radio" name="q1" value="a"> | |
| <label>Empathy</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q1" value="b"> | |
| <label>Creativity</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q1" value="c"> | |
| <label>Leadership Mindset</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q1" value="d"> | |
| <label>Entrepreneurial Spirit</label> | |
| </label> | |
| </div> | |
| <div class="feedback" id="feedback1"></div> | |
| </div> | |
| <!-- Question 2 --> | |
| <div class="quiz-container"> | |
| <div class="question"><span class="question-number">2.</span> What does the "X" in EXCEL stand for?</div> | |
| <div class="options"> | |
| <label class="option"> | |
| <input type="radio" name="q2" value="a"> | |
| <label>Excellence</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q2" value="b"> | |
| <label>eXceptional Capability</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q2" value="c"> | |
| <label>Experience</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q2" value="d"> | |
| <label>Exploration</label> | |
| </label> | |
| </div> | |
| <div class="feedback" id="feedback2"></div> | |
| </div> | |
| <!-- Question 3 --> | |
| <div class="quiz-container"> | |
| <div class="question"><span class="question-number">3.</span> Which value involves perceiving the world in new ways and generating solutions?</div> | |
| <div class="options"> | |
| <label class="option"> | |
| <input type="radio" name="q3" value="a"> | |
| <label>Exceptional Capability</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q3" value="b"> | |
| <label>Creativity</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q3" value="c"> | |
| <label>Empathy</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q3" value="d"> | |
| <label>Leadership Mindset</label> | |
| </label> | |
| </div> | |
| <div class="feedback" id="feedback3"></div> | |
| </div> | |
| <!-- Question 4 --> | |
| <div class="quiz-container"> | |
| <div class="question"><span class="question-number">4.</span> Overcoming challenges and accepting responsibility relates to which value?</div> | |
| <div class="options"> | |
| <label class="option"> | |
| <input type="radio" name="q4" value="a"> | |
| <label>Creativity</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q4" value="b"> | |
| <label>Leadership Mindset</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q4" value="c"> | |
| <label>Entrepreneurial Spirit</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q4" value="d"> | |
| <label>Exceptional Capability</label> | |
| </label> | |
| </div> | |
| <div class="feedback" id="feedback4"></div> | |
| </div> | |
| <!-- Question 5 --> | |
| <div class="quiz-container"> | |
| <div class="question"><span class="question-number">5.</span> Which value focuses on motivating and influencing people toward a common goal?</div> | |
| <div class="options"> | |
| <label class="option"> | |
| <input type="radio" name="q5" value="a"> | |
| <label>Leadership Mindset</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q5" value="b"> | |
| <label>Entrepreneurial Spirit</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q5" value="c"> | |
| <label>Empathy</label> | |
| </label> | |
| <label class="option"> | |
| <input type="radio" name="q5" value="d"> | |
| <label>Creativity</label> | |
| </label> | |
| </div> | |
| <div class="feedback" id="feedback5"></div> | |
| </div> | |
| <div class="button-group"> | |
| <button class="btn btn-primary" onclick="submitQuiz()">Submit Quiz</button> | |
| <button class="btn btn-secondary" onclick="resetQuiz()">Reset</button> | |
| </div> | |
| <div id="results" class="results"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>VinUniversity</h3> | |
| <p>Developing talents for the future through world-class education and research.</p> | |
| <p style="font-size: 12px; margin-top: 16px; color: rgba(255, 255, 255, 0.6);">© 2026 VinUniversity. All Rights Reserved.</p> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Quick Links</h3> | |
| <ul class="footer-links"> | |
| <li><a href="https://vinuni.edu.vn" target="_blank">Official Website</a></li> | |
| <li><a href="https://vinuni.edu.vn/about-vinuniversity/" target="_blank">About VinUni</a></li> | |
| <li><a href="https://vinuni.edu.vn/academics/" target="_blank">Academics</a></li> | |
| <li><a href="https://vinuni.edu.vn/admission/" target="_blank">Admission</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Contact</h3> | |
| <p>VinUniversity<br>Vinhomes Ocean Park<br>Gia Lam, Hanoi, Vietnam</p> | |
| <p>Email: <a href="mailto:info@vinuni.edu.vn" style="color: rgba(255, 255, 255, 0.8);">info@vinuni.edu.vn</a></p> | |
| <p>Tel: <a href="tel:+842471089779" style="color: rgba(255, 255, 255, 0.8);">+84 (24) 7108 9779</a></p> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <p>Empowering the next generation of leaders and innovators | © 2026 VinUniversity</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Tab switching functionality | |
| function switchTab(tabName) { | |
| // Hide all tab contents | |
| const contents = document.querySelectorAll('.tab-content'); | |
| contents.forEach(content => { | |
| content.classList.remove('active'); | |
| }); | |
| // Remove active class from all buttons | |
| const buttons = document.querySelectorAll('.tab-btn'); | |
| buttons.forEach(btn => { | |
| btn.classList.remove('active'); | |
| }); | |
| // Show selected tab | |
| document.getElementById(tabName).classList.add('active'); | |
| // Add active class to clicked button | |
| event.target.classList.add('active'); | |
| // Scroll to top of content | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| } | |
| // Quiz correct answers | |
| const correctAnswers = { | |
| q1: 'a', // Empathy | |
| q2: 'b', // eXceptional Capability | |
| q3: 'b', // Creativity | |
| q4: 'c', // Entrepreneurial Spirit | |
| q5: 'a' // Leadership Mindset | |
| }; | |
| // Submit quiz | |
| function submitQuiz() { | |
| let score = 0; | |
| let answered = 0; | |
| for (let i = 1; i <= 5; i++) { | |
| const selected = document.querySelector(`input[name="q${i}"]:checked`); | |
| const feedback = document.getElementById(`feedback${i}`); | |
| const optionElements = document.querySelectorAll(`input[name="q${i}"]`); | |
| // Clear previous styling | |
| optionElements.forEach(opt => { | |
| opt.parentElement.classList.remove('correct', 'incorrect'); | |
| }); | |
| if (selected) { | |
| answered++; | |
| const isCorrect = selected.value === correctAnswers[`q${i}`]; | |
| if (isCorrect) { | |
| score++; | |
| feedback.textContent = '✓ Correct!'; | |
| feedback.classList.add('show', 'correct'); | |
| selected.parentElement.classList.add('correct'); | |
| } else { | |
| feedback.textContent = '✗ Incorrect. The correct answer is: ' + getAnswerText(`q${i}`, correctAnswers[`q${i}`]); | |
| feedback.classList.add('show', 'incorrect'); | |
| selected.parentElement.classList.add('incorrect'); | |
| // Highlight correct answer | |
| const correctOption = document.querySelector(`input[name="q${i}"][value="${correctAnswers[`q${i}`]}"]`); | |
| correctOption.parentElement.classList.add('correct'); | |
| } | |
| } else { | |
| feedback.textContent = 'Please select an answer.'; | |
| feedback.classList.add('show', 'incorrect'); | |
| } | |
| } | |
| // Update progress | |
| updateProgress(answered); | |
| // Show results | |
| const resultsDiv = document.getElementById('results'); | |
| const percentage = (score / 5) * 100; | |
| const passed = percentage >= 60; | |
| resultsDiv.className = 'results ' + (passed ? 'show' : 'show failed'); | |
| resultsDiv.innerHTML = ` | |
| <div class="score">${score}/5</div> | |
| <div class="score-text">${percentage.toFixed(0)}%</div> | |
| <div class="results-message"> | |
| ${passed ? '🎉 Excellent! You have a great understanding of VinUniversity\'s EXCEL values!' : '📚 Keep learning! Review the values and try again.'} | |
| </div> | |
| `; | |
| // Scroll to results | |
| resultsDiv.scrollIntoView({ behavior: 'smooth', block: 'center' }); | |
| } | |
| // Get answer text | |
| function getAnswerText(question, answer) { | |
| const answers = { | |
| q1: { a: 'Empathy', b: 'Creativity', c: 'Leadership Mindset', d: 'Entrepreneurial Spirit' }, | |
| q2: { a: 'Excellence', b: 'eXceptional Capability', c: 'Experience', d: 'Exploration' }, | |
| q3: { a: 'Exceptional Capability', b: 'Creativity', c: 'Empathy', d: 'Leadership Mindset' }, | |
| q4: { a: 'Creativity', b: 'Leadership Mindset', c: 'Entrepreneurial Spirit', d: 'Exceptional Capability' }, | |
| q5: { a: 'Leadership Mindset', b: 'Entrepreneurial Spirit', c: 'Empathy', d: 'Creativity' } | |
| }; | |
| return answers[question][answer]; | |
| } | |
| // Reset quiz | |
| function resetQuiz() { | |
| // Clear all selections | |
| document.querySelectorAll('input[type="radio"]').forEach(radio => { | |
| radio.checked = false; | |
| radio.parentElement.classList.remove('correct', 'incorrect'); | |
| }); | |
| // Clear all feedback | |
| document.querySelectorAll('.feedback').forEach(feedback => { | |
| feedback.classList.remove('show', 'correct', 'incorrect'); | |
| feedback.textContent = ''; | |
| }); | |
| // Hide results | |
| document.getElementById('results').classList.remove('show'); | |
| // Reset progress | |
| updateProgress(0); | |
| } | |
| // Update progress | |
| function updateProgress(answered) { | |
| const progress = (answered / 5) * 100; | |
| document.getElementById('progressFill').style.width = progress + '%'; | |
| document.getElementById('answeredCount').textContent = answered; | |
| } | |
| // Add click handlers to options | |
| document.querySelectorAll('.option').forEach(option => { | |
| option.addEventListener('click', function() { | |
| const radio = this.querySelector('input[type="radio"]'); | |
| radio.checked = true; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |