当前位置：首页 > JavaScript

js实现选词填空

2026-01-30 23:31:12JavaScript

实现选词填空的基本思路

选词填空的核心逻辑是通过JavaScript动态操作DOM元素，实现用户交互和答案验证。通常需要创建题目区域、可选词区域以及结果反馈机制。

HTML结构设计

基础的HTML结构包含题目展示区、可选词区和提交按钮：

<div id="question"></div>
<div id="options"></div>
<button id="submit">提交答案</button>
<div id="result"></div>

初始化题目数据

准备题目数据时，可以用占位符标记填空位置：

js实现选词填空

const quizData = {
  text: "JavaScript是一种__1__语言，常用于__2__开发。",
  answers: ["脚本", "Web"],
  options: ["编译", "脚本", "移动", "Web", "系统"]
}

动态生成填空题目

将原始文本中的占位符替换为可交互的空格：

function renderQuestion() {
  const questionText = quizData.text.replace(/__\d+__/g, 
    match => `<span class="blank" data-id="${match.slice(2, -2)}">______</span>`
  );
  document.getElementById('question').innerHTML = questionText;

  quizData.options.forEach(opt => {
    const btn = document.createElement('button');
    btn.className = 'option';
    btn.textContent = opt;
    btn.onclick = () => selectOption(opt);
    document.getElementById('options').appendChild(btn);
  });
}

处理选项选择

实现点击选项填充空白的功能：

js实现选词填空

function selectOption(selected) {
  const blanks = document.querySelectorAll('.blank');
  const firstEmpty = [...blanks].find(b => b.textContent === '______');

  if (firstEmpty) {
    firstEmpty.textContent = selected;
    firstEmpty.dataset.answer = selected;
  }
}

验证答案逻辑

提交时检查用户填写的答案是否正确：

document.getElementById('submit').addEventListener('click', () => {
  const blanks = document.querySelectorAll('.blank');
  let allCorrect = true;

  blanks.forEach(blank => {
    const id = blank.dataset.id;
    const correctAnswer = quizData.answers[id-1];
    if (blank.dataset.answer !== correctAnswer) {
      blank.style.color = 'red';
      allCorrect = false;
    } else {
      blank.style.color = 'green';
    }
  });

  document.getElementById('result').textContent = 
    allCorrect ? '全部正确！' : '请检查错误答案';
});

样式优化建议

添加CSS提升交互体验：

.blank {
  display: inline-block;
  min-width: 60px;
  border-bottom: 2px solid #333;
  text-align: center;
  margin: 0 5px;
}

.option {
  margin: 5px;
  padding: 8px 12px;
  background: #eee;
  border: none;
  cursor: pointer;
}

.option:hover {
  background: #ddd;
}