master

分支 (2)

管理

管理

master

develop

hanzi
/
section5.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>汉字一点通</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/common.css" />
    <style>
      .poem {
        text-align: center;
        margin-top: 20px;
      }
      .poem-line {
        margin-bottom: 20px;
        position: relative;
      }
      .character-wrapper {
        display: inline-block;
        text-align: center;
        margin: 0 5px;
      }
      .pinyin {
        font-size: 12px;
        color: #666;
        display: block;
        height: 16px;
      }
      .character {
        cursor: pointer;
        font-size: 24px;
        display: block;
        margin-top: 2px;
      }
      .line-meaning {
        font-size: 12px;
        color: #666;
        display: block;
        height: 16px;
        margin-top: 8px;
      }
      .buttons {
        text-align: center;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Let's learn a poem</h1>
    <div class="content">
      <div class="poem">
        <div class="poem-line">
          <div class="character-wrapper">
            <span class="pinyin">liǎng</span>
            <span class="character" data-meaning="two">两</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">zhī</span>
            <span class="character" data-meaning="a measure word">只</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">xiǎo</span>
            <span class="character" data-meaning="small">小</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">shǒu</span>
            <span class="character" data-meaning="hand">手</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">pāi</span>
            <span class="character" data-meaning="clap">拍</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">pāi</span>
            <span class="character" data-meaning="clap">拍</span>
          </div>
          <div class="line-meaning">Clap your hands gently</div>
        </div>
        <div class="poem-line">
          <div class="character-wrapper">
            <span class="pinyin">wǒ de</span>
            <span class="character" data-meaning="my">我的</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">péng yǒu</span>
            <span class="character" data-meaning="friend">朋友</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">kuài</span>
            <span class="character" data-meaning="fast; hurry">快</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">lái</span>
            <span class="character" data-meaning="come">来</span>
          </div>
          <div class="line-meaning">my friends come over quickly.</div>
        </div>
        <div class="poem-line">
          <div class="character-wrapper">
            <span class="pinyin">liǎng</span>
            <span class="character" data-meaning="two">两</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">zhī</span>
            <span class="character" data-meaning="a measure word">只</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">xiǎo</span>
            <span class="character" data-meaning="small">小</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">shǒu</span>
            <span class="character" data-meaning="hand">手</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">xǐ</span>
            <span class="character" data-meaning="wash">洗</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">xǐ</span>
            <span class="character" data-meaning="wash">洗</span>
          </div>
          <div class="line-meaning">Wash your hands carefully,</div>
        </div>
        <div class="poem-line">
          <div class="character-wrapper">
            <span class="pinyin">wǒ de</span>
            <span class="character" data-meaning="my">我的</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">péng yǒu</span>
            <span class="character" data-meaning="friend">朋友</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">shì</span>
            <span class="character" data-meaning="is">是</span>
          </div>
          <div class="character-wrapper">
            <span class="pinyin">nǐ</span>
            <span class="character" data-meaning="you">你</span>
          </div>
          <div class="line-meaning">You are my good friends truly.</div>
        </div>
      </div>
      <div class="buttons">
        <button id="pinyin-button" class="btn btn-primary">Hide Pinyin</button>
        <button id="read-button" class="btn btn-success">Read</button>
        <button id="english-button" class="btn btn-info">Hide English</button>
      </div>
    </div>

    <div class="nav-bottom">
      <a href="section4.html">Let's try to create HANZI</a>
      <a href="section6.html">Evolution of HANZI</a>
    </div>

    <div class="modal fade" id="meaningModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="meaningModalLabel">字的意思</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body" id="modal-body-content"></div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>

    <script src="js/jquery-3.5.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
      document
        .getElementById("pinyin-button")
        .addEventListener("click", function () {
          const pinyins = document.querySelectorAll(".pinyin");
          pinyins.forEach((pinyin) => {
            pinyin.style.display =
              pinyin.style.display === "block" ? "none" : "block";
          });
          this.textContent =
            this.textContent === "Show Pinyin" ? "Hide Pinyin" : "Show Pinyin";
        });

      document
        .getElementById("read-button")
        .addEventListener("click", function () {
          const utterance = new SpeechSynthesisUtterance(
            "两只小手拍拍，我的朋友快来。两只小手洗洗，我的朋友是你。"
          );
          utterance.lang = "zh-CN";
          speechSynthesis.speak(utterance);
        });

      document
        .getElementById("english-button")
        .addEventListener("click", function () {
          const meanings = document.querySelectorAll(".line-meaning");
          meanings.forEach((meaning) => {
            meaning.style.display =
              meaning.style.display === "block" ? "none" : "block";
          });
          this.textContent =
            this.textContent === "Show English"
              ? "Hide English"
              : "Show English";
        });

      document.querySelectorAll(".character").forEach(function (span) {
        span.addEventListener("click", function () {
          const meaning = span.getAttribute("data-meaning");
          document.getElementById("modal-body-content").innerText =
            "意思：" + meaning;
          $("#meaningModal").modal("show");
        });
      });
    </script>
  </body>
</html>