古诗抽背互动卡牌游戏 - 知达AI助教 | 教育人工智能案例 | 教育人工智能社区

请创建一个关于"古诗抽背"的课堂抽认翻牌互动网页，具体要求如下： 1. 内容选择：精选8位高中课本中出现的著名古诗词，确保涵盖不同风格流派与创作时期。 2. 视觉设计： - 卡牌尺寸采用3:4比例 - 设计卡牌背面（使用古诗相应朝代元素如卷轴、祥云等作为背景，画有清晰的国风诗人画像，画像直接AI生成） - 卡牌正面为诗人所属朝代、名字以及需要背诵的古诗名字 - 古诗窗口（使用古诗相应朝代元素如卷轴、祥云等作为背景，展示诗的全部内容） 3. 交互流程： - 开始时展示8张卡牌整齐排列，全部背面朝上，背面画有清晰的国风诗人画像 - 鼠标点选卡牌，被选中的卡牌执行翻转动画，点击第二个卡片时，第一个点开的卡片自动恢复到初始状态 - 翻转完成后清晰显示诗人朝代、名字以及需要背诵的古诗 - 点击卡牌正面，弹出古诗窗口，展示全部诗句 4. 音频配置： - 卡牌翻转时添加翻页音效 - 翻转完成后播放标准男声配音，准确读出文字内容（如"三国、诸葛亮、出师表"） 5. 技术实现： - 纯HTML+CSS+JavaScript， 6. 技术要求： - 动画过渡流畅自然 - 音频与画面同步精准
以下是一个符合您要求的“古诗抽背”课堂互动网页的完整代码实现。代码使用纯HTML、CSS和JavaScript编写，满足所有功能需求。

完整代码

代码生成中...

知达任务回放中

古诗抽背互动卡牌游戏

代码

预览

88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
    }
    .modal-close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      font-size: 18px;
    }
  </style>
</head>
<body>
<div class="card-container">
  <!-- 卡牌1 -->
  <div class="card" data-poet
      ="李白" data-dynasty="唐朝" 
      data-title="静夜思" data-poem
      ="床前明月光，疑是地上霜。举
      头望明月，低头思故乡。">
    <div class="card-inner">
      <div class="card-front">唐朝
          <br>李白<br>静夜思</div>
      <div class="card-back" style
          ="background-image: url
          ('https://via.placeholder
          .com/150x200?text=唐朝
          +祥云');"></div>
    </div>
  </div>
  <!-- 卡牌2 -->
  <div class="card"
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX