Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AWS Cloud Practitioner Quiz</title> | |
| <style> | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f5f5f5; | |
| } | |
| h1 { | |
| color: #008CC1; | |
| text-align: center; | |
| margin-bottom: 30px; | |
| } | |
| .quiz-container { | |
| background-color: white; | |
| border-radius: 8px; | |
| padding: 25px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .question { | |
| font-weight: bold; | |
| margin-bottom: 15px; | |
| font-size: 18px; | |
| } | |
| .options { | |
| margin-bottom: 20px; | |
| } | |
| .option { | |
| display: block; | |
| margin: 10px 0; | |
| padding: 10px 15px; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .option:hover { | |
| background-color: #f0f0f0; | |
| } | |
| .option.selected { | |
| border-color: #008CC1; | |
| background-color: #e6f7ff; | |
| } | |
| .correct { | |
| background-color: #d4edda ; | |
| border-color: #c3e6cb ; | |
| color: #155724 ; | |
| } | |
| .incorrect { | |
| background-color: #f8d7da ; | |
| border-color: #f5c6cb ; | |
| color: #721c24 ; | |
| } | |
| .explanation { | |
| padding: 10px; | |
| margin-top: 10px; | |
| border-radius: 4px; | |
| display: none; | |
| } | |
| .explanation.show { | |
| display: block; | |
| } | |
| .navigation { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 20px; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| background-color: #008CC1; | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 16px; | |
| transition: background-color 0.3s; | |
| } | |
| button:hover { | |
| background-color: #006a8e; | |
| } | |
| button:disabled { | |
| background-color: #cccccc; | |
| cursor: not-allowed; | |
| } | |
| .progress { | |
| margin-top: 20px; | |
| text-align: center; | |
| font-weight: bold; | |
| } | |
| .score-display { | |
| text-align: center; | |
| font-size: 18px; | |
| margin-top: 10px; | |
| } | |
| .final-results { | |
| text-align: center; | |
| padding: 20px; | |
| display: none; | |
| } | |
| .final-score { | |
| font-size: 24px; | |
| font-weight: bold; | |
| margin: 20px 0; | |
| } | |
| .pass { | |
| color: #28a745; | |
| } | |
| .fail { | |
| color: #dc3545; | |
| } | |
| .restart-btn { | |
| margin-top: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>AWS Cloud Practitioner Quiz</h1> | |
| <div class="quiz-container"> | |
| <div class="progress">Question <span id="current-question">1</span> of <span id="total-questions">65</span></div> | |
| <div class="score-display">Score: <span id="score">0</span>/65</div> | |
| <div id="quiz-content"> | |
| <div class="question" id="question-text"></div> | |
| <div class="options" id="options-container"></div> | |
| <div class="explanation" id="explanation"></div> | |
| <div class="navigation"> | |
| <button id="prev-btn" disabled>Previous</button> | |
| <button id="next-btn">Next</button> | |
| </div> | |
| </div> | |
| <div id="final-results" class="final-results"> | |
| <h2>Quiz Completed!</h2> | |
| <div class="final-score" id="final-score"></div> | |
| <p id="result-message"></p> | |
| <button class="restart-btn" id="restart-btn">Restart Quiz</button> | |
| </div> | |
| </div> | |
| <script type="module" src="quiz-engine.js"></script> | |
| </body> | |
| </html> |