在Android Studio中为测验应用实现答错跳转网页按钮的方法

核心逻辑很明确：用户答错题目时显示按钮，点击按钮跳转到指定网站。下面分不同技术栈给出具体实现方式：

原生JavaScript（纯Web应用） #

步骤1：添加HTML按钮元素 #

在你的答题结果展示区域，先放一个默认隐藏的按钮：

<div class="answer-result">
  <span id="result-tip"></span>
  <!-- 默认隐藏跳转按钮 -->
  <button id="go-info-btn" style="display: none;">查看正确答案相关信息</button>
</div>

步骤2：编写答题判断与跳转逻辑 #

在处理答题结果的JS代码里，加入判断和按钮控制：

// 假设这是处理用户提交答案的函数
function submitAnswer(userInput, correctAnswer) {
  const resultTip = document.getElementById('result-tip');
  const infoBtn = document.getElementById('go-info-btn');
  const targetUrl = 'https://你的目标网站地址.com'; // 替换成实际网址

  if (userInput !== correctAnswer) {
    // 答错时显示提示和按钮
    resultTip.textContent = '回答错误啦，点下面的按钮了解正确答案相关内容';
    infoBtn.style.display = 'inline-block';
    // 绑定跳转事件
    infoBtn.onclick = () => {
      window.location.href = targetUrl;
    };
  } else {
    // 答对时隐藏按钮，显示正确提示
    resultTip.textContent = '回答正确！';
    infoBtn.style.display = 'none';
  }
}

React（函数组件） #

如果你的应用是React开发的，可以这样写：

import { useState } from 'react';

const QuizItem = () => {
  const [answerWrong, setAnswerWrong] = useState(false);
  const targetUrl = 'https://你的目标网站地址.com'; // 替换成实际网址

  // 检查答案的函数
  const checkUserAnswer = (userAns, correctAns) => {
    setAnswerWrong(userAns !== correctAns);
  };

  // 跳转处理
  const handleJump = () => {
    window.location.href = targetUrl;
  };

  return (
    <div className="quiz-item">
      {/* 这里放题目和用户输入区域 */}
      {answerWrong && (
        <div className="wrong-result">
          <p>回答错误，点击按钮查看正确答案相关信息</p>
          <button onClick={handleJump}>去了解详情</button>
        </div>
      )}
      {!answerWrong && <p className="correct-result">回答正确！</p>}
    </div>
  );
};

export default QuizItem;

Vue 3（组合式API） #

Vue项目的实现示例：

<template>
  <div class="quiz-box">
    <!-- 题目与答题输入区域省略 -->
    <div v-if="isAnswerWrong" class="wrong-tip">
      <p>回答错误，点下面的按钮看正确答案相关内容</p>
      <button @click="jumpToInfo">查看详情</button>
    </div>
    <p v-else class="correct-tip">回答正确！</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const isAnswerWrong = ref(false);
const targetUrl = 'https://你的目标网站地址.com'; // 替换成实际网址

const checkAnswer = (userAns, correctAns) => {
  isAnswerWrong.value = userAns !== correctAns;
};

const jumpToInfo = () => {
  window.location.href = targetUrl;
};
</script>

额外提示 #

如果不同题目需要跳转到不同的网站，可以把目标网址存在你的题目数据里（比如每个题目对象加个referenceUrl字段），这样判断答错时，直接取对应题目的网址就行，不用写死一个地址。

内容的提问来源于stack exchange，提问作者maycene