公告 - 爱迪国际

ta charset="UTF-8" /> ta name="viewport" content="width=device-width, initial-scale=1.0" /> nk rel="stylesheet" href="styles.css" /> 知识点学习页面

知识点

1. 二进制
2. 进制转换

3. 位运算

.container {
  display: flex;
  width: 80%;
  margin: 0 auto;
}

.left-column {
  width: 20%;
  border-right: 1px solid #ccc;
  padding: 10px;
}

.right-column {
  width: 80%;
  padding: 10px;
}

#topic-list li {
  cursor: pointer;
  margin-bottom: 5px;
}

#topic-list li:hover {
  background-color: #f0f0f0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>知识点学习页面</title>
</head>

<body>
  <div class="container">
    <div class="left-column">
      <h3>知识点</h3>
      <ul id="topic-list">
        <li data-topic="binary">1. 二进制</li>
        <li data-topic="conversion">2. 进制转换</li>
        <li data-topic="bitwise">3. 位运算</li>
      </ul>
    </div>
    <div class="right-column">
      <div id="content"></div>
      <div id="quiz" style="display: none;">
        <h3>互动选择题</h3>
        <p id="question"></p >
        <input type="radio" id="option1" name="answer">
        <label for="option1"></label><br>
        <input type="radio" id="option2" name="answer">
        <label for="option2"></label><br>
        <input type="radio" id="option3" name="answer">
        <label for="option3"></label><br>
        <button onclick="checkAnswer()">提交答案</button>
        <div id="explanation" style="display: none;"></div>
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

const topicList = document.getElementById('topic-list');
const contentDiv = document.getElementById('content');
const quizDiv = document.getElementById('quiz');
const questionElement = document.getElementById('question');
const option1 = document.getElementById('option1');
const option2 = document.getElementById('option2');
const option3 = document.getElementById('option3');
const explanationDiv = document.getElementById('explanation');

// 知识点内容
const topics = {
  binary: `在计算机中，二进制是一种以2为基数的计数系统，它只使用0和1两个符号。二进制在计算机底层存储和运算中起着关键作用，因为计算机硬件电路的高低电平可以很方便地表示0和1。`,
  conversion: `进制转换是将一个数从一种进制表示转换为另一种进制表示。常见的有二进制、八进制、十进制和十六进制之间的转换。例如，将十进制数转换为二进制数可以使用除2取余的方法。`,
  bitwise: `位运算是对二进制位进行的运算，包括与(&)、或(|)、非(~)、异或(^)等操作。位运算在一些底层编程和数据处理中经常被使用，比如在压缩算法、加密算法等方面。`
};

// 选择题内容
const quizData = {
  binary: {
    question: "二进制的基数是多少？",
    options: ["1", "2", "10"],
    answer: "2",
    explanation: "二进制是以2为基数的计数系统，它只有0和1两个符号，逢2进1。"
  },
  conversion: {
    question: "将十进制数10转换为二进制数是？",
    options: ["1010", "1100", "1001"],
    answer: "1010",
    explanation: "使用除2取余法，10除以2商5余0，5除以2商2余1，2除以2商1余0，1除以2商0余1，从下往上取余数得到1010。"
  },
  bitwise: {
    question: "以下哪个是按位与运算符号？",
    options: ["|", "&", "^"],
    answer: "&",
    explanation: "按位与运算符号是&，它的运算规则是两个对应位都为1时结果位才为1，否则为0。"
  }
};

topicList.addEventListener('click', function (e) {
  if (e.target.tagName === 'LI') {
    const topic = e.target.dataset.topic;
    contentDiv.innerHTML = topics[topic];
    // 显示选择题
    const quiz = quizData[topic];
    if (quiz) {
      quizDiv.style.display = 'block';
      questionElement.textContent = quiz.question;
      option1.nextSibling.textContent = quiz.options[0];
      option2.nextSibling.textContent = quiz.options[1];
      option3.nextSibling.textContent = quiz.options[2];
      explanationDiv.textContent = quiz.explanation;
    } else {
      quizDiv.style.display = 'none';
    }
  }
});

function checkAnswer() {
  const selectedAnswer = document.querySelector('input[name="answer"]:checked');
  if (selectedAnswer) {
    const correctAnswer = quizData[document.querySelector('#topic-list li.active').dataset.topic].answer;
    if (selectedAnswer.value === correctAnswer) {
      alert('回答正确！');
    } else {
      alert('回答错误！');
    }
    explanationDiv.style.display = 'block';
  } else {
    alert('请选择一个答案！');
  }
}

ript src="script.js">ript>