Gamified Learning Platform JavaScript, HTML, CSS

👤 Sharing: AI
```javascript
<!DOCTYPE html>
<html>
<head>
<title>Gamified Learning Platform</title>
<style>
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

#header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1em 0;
}

#content {
  padding: 20px;
}

.module {
  background-color: white;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 5px;
}

.module h2 {
  margin-top: 0;
}

.quiz-question {
  margin-bottom: 10px;
}

.quiz-options {
  list-style-type: none;
  padding: 0;
}

.quiz-options li {
  margin-bottom: 5px;
}

.quiz-options label {
  display: block;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}

.quiz-options input[type="radio"] {
  margin-right: 5px;
}

#feedback {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}

#feedback h3 {
  margin-top: 0;
}

#score {
  font-size: 1.2em;
  font-weight: bold;
}

#leaderboard {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}

#leaderboard h3 {
  margin-top: 0;
}

#leaderboard ol {
  padding-left: 20px;
}

#level-up-message {
    color: green;
    font-weight: bold;
    margin-top: 10px;
}

</style>
</head>
<body>

<div id="header">
  <h1>Gamified Learning Platform</h1>
</div>

<div id="content">

  <div class="module" id="module1">
    <h2>Module 1: Introduction to JavaScript</h2>
    <p>Learn the basics of JavaScript programming.</p>

    <div class="quiz" id="quiz1">
      <h3>Quiz: JavaScript Fundamentals</h3>

      <div class="quiz-question">
        <p>What is the correct way to declare a JavaScript variable?</p>
        <ul class="quiz-options">
          <li><label><input type="radio" name="q1" value="a"> variable x;</label></li>
          <li><label><input type="radio" name="q1" value="b"> var x;</label></li>
          <li><label><input type="radio" name="q1" value="c"> x = variable;</label></li>
        </ul>
      </div>

      <div class="quiz-question">
        <p>Which operator is used to assign a value to a variable?</p>
        <ul class="quiz-options">
          <li><label><input type="radio" name="q2" value="a"> ==</label></li>
          <li><label><input type="radio" name="q2" value="b"> =</label></li>
          <li><label><input type="radio" name="q2" value="c"> ===</label></li>
        </ul>
      </div>

      <button onclick="submitQuiz('quiz1')">Submit Quiz</button>
    </div>
  </div>

  <div class="module" id="module2">
    <h2>Module 2: HTML Basics</h2>
    <p>Learn about HTML elements and structure.</p>

    <div class="quiz" id="quiz2">
      <h3>Quiz: HTML Fundamentals</h3>

      <div class="quiz-question">
        <p>Which HTML tag is used to define the title of a document?</p>
        <ul class="quiz-options">
          <li><label><input type="radio" name="q3" value="a"> &lt;head&gt;</label></li>
          <li><label><input type="radio" name="q3" value="b"> &lt;title&gt;</label></li>
          <li><label><input type="radio" name="q3" value="c"> &lt;header&gt;</label></li>
        </ul>
      </div>

      <div class="quiz-question">
        <p>Which HTML tag is used to create a hyperlink?</p>
        <ul class="quiz-options">
          <li><label><input type="radio" name="q4" value="a"> &lt;link&gt;</label></li>
          <li><label><input type="radio" name="q4" value="b"> &lt;a&gt;</label></li>
          <li><label><input type="radio" name="q4" value="c"> &lt;href&gt;</label></li>
        </ul>
      </div>

      <button onclick="submitQuiz('quiz2')">Submit Quiz</button>
    </div>
  </div>

  <div class="module" id="module3">
    <h2>Module 3: CSS Fundamentals</h2>
    <p>Learn how to style HTML elements using CSS.</p>

    <div class="quiz" id="quiz3">
      <h3>Quiz: CSS Fundamentals</h3>

      <div class="quiz-question">
        <p>Which CSS property is used to change the text color of an element?</p>
        <ul class="quiz-options">
          <li><label><input type="radio" name="q5" value="a"> text-color</label></li>
          <li><label><input type="radio" name="q5" value="b"> color</label></li>
          <li><label><input type="radio" name="q5" value="c"> font-color</label></li>
        </ul>
      </div>

      <div class="quiz-question">
        <p>How do you insert a comment in a CSS file?</p>
        <ul class="quiz-options">
          <li><label><input type="radio" name="q6" value="a"> // This is a comment</label></li>
          <li><label><input type="radio" name="q6" value="b"> /* This is a comment */</label></li>
          <li><label><input type="radio" name="q6" value="c"> -- This is a comment</label></li>
        </ul>
      </div>

      <button onclick="submitQuiz('quiz3')">Submit Quiz</button>
    </div>
  </div>

  <div id="feedback">
    <h3>Quiz Results</h3>
    <p id="score">Score: 0</p>
    <p id="level-up-message"></p>
  </div>

  <div id="leaderboard">
    <h3>Leaderboard</h3>
    <ol id="leaderboard-list">
      <li>User 1: 90</li>
      <li>User 2: 85</li>
      <li>User 3: 80</li>
    </ol>
  </div>

</div>

<script>
let totalScore = 0;
let currentLevel = 1;

function submitQuiz(quizId) {
  let score = 0;
  let quiz = document.getElementById(quizId);
  let questions;

  if (quizId === 'quiz1') {
    questions = [
      { name: 'q1', correct: 'b' },
      { name: 'q2', correct: 'b' }
    ];
  } else if (quizId === 'quiz2') {
    questions = [
      { name: 'q3', correct: 'b' },
      { name: 'q4', correct: 'b' }
    ];
  } else if (quizId === 'quiz3') {
      questions = [
          { name: 'q5', correct: 'b'},
          { name: 'q6', correct: 'b'}
      ];
  } else {
    console.error("Invalid quizId");
    return;
  }


  questions.forEach(question => {
    let radios = quiz.querySelectorAll(`input[name="${question.name}"]`);
    radios.forEach(radio => {
      if (radio.checked && radio.value === question.correct) {
        score++;
      }
    });
  });

  totalScore += score;

  document.getElementById('score').textContent = `Score: ${totalScore}`;

  //Level Up Logic (simple)
  let levelUpMessage = document.getElementById('level-up-message');
  if (totalScore >= currentLevel * 5) {
        currentLevel++;
        levelUpMessage.textContent = `Congratulations! You've reached level ${currentLevel}!`;

  } else {
      levelUpMessage.textContent = ''; //Clear the message if no level up
  }

  updateLeaderboard(totalScore);
}


function updateLeaderboard(newScore) {
    let leaderboardList = document.getElementById('leaderboard-list');
    let existingScores = Array.from(leaderboardList.children).map(item => {
        let text = item.textContent;
        let score = parseInt(text.split(': ')[1]);
        return { element: item, score: score };
    });

    //Add the new score in a temporary array
    let newEntry = { element: null, score: newScore, user: 'You' }; //User can be customized

    existingScores.push(newEntry);

    //Sort
    existingScores.sort((a, b) => b.score - a.score);


    //Update the list in the DOM (only top 3)
    leaderboardList.innerHTML = ''; //Clear the list
    for (let i = 0; i < Math.min(3, existingScores.length); i++) {
        let entry = existingScores[i];
        let listItem = document.createElement('li');

        let userName = entry.user || `User ${i + 1}`; //Use the existing name or assign a default if this is an old entry
        listItem.textContent = `${userName}: ${entry.score}`;
        leaderboardList.appendChild(listItem);
    }

}
</script>

</body>
</html>
```
👁️ Viewed: 19
Gamified Learning Platform JavaScript, HTML, CSS

Comments

Site Statistics
