如何在单个JavaScript文件中实现两个不同的答题测验

核心问题解答 #

• 不需要新增JavaScript文件，完全可以在同一个script.js中存储第二个测验的数据，这种方式更便于复用相同的交互逻辑，减少冗余代码。
• 实现思路是将每个测验的独立数据（图片、题目、答案）封装成对象，让通用逻辑根据当前选中的测验读取对应数据，避免重复编写交互代码。

第一步：修改HTML，添加第二个测验启动按钮 #

在初始页面的按钮后新增第二个测验的启动按钮，同时将启动函数改为通用型，传入测验标识：

<!-- Pantalla inicial -->
<div id="pantalla-inicial">
    <p>FLAGS</p>
    <button class="btn" onclick="startQuiz('quiz1')">QUIZ 1</button>
    <button class="btn" onclick="startQuiz('quiz2')">QUIZ 2</button>
</div>

第二步：重构JavaScript代码，封装测验数据 #

将原有单个测验的数据拆分为独立对象集合，新增第二个测验的数据，并修改核心逻辑以适配多测验场景：

// 封装所有测验的数据，新增quiz2的内容即可扩展新测验
const quizzes = {
    quiz1: {
        flags: ["pa.svg", "bo.svg", "ad.svg", "gb.svg", "na.svg"],
        correctAnswers: [2,2,1,1,0],
        options: [
            ["SUDAFRICA", "SINGAPUR", "PANAMA"],
            ["PERU", "ITALIA", "BOLIVIA"],
            ["TUNEZ", "ANDORRA", "ANTIGUA Y BARBUDA"],
            ["UCRANIA", "REINO UNIDO", "MADAGASCAR"],
            ["NAMIBIA", "OMAN", "ETIOPIA"]
        ]
    },
    quiz2: {
        // 替换为第二个测验的图片、答案、选项
        flags: ["mx.svg", "ca.svg", "us.svg"],
        correctAnswers: [0,1,2],
        options: [
            ["MEXICO", "CANADA", "ESTADOS UNIDOS"],
            ["FRANCIA", "CANADA", "ALEMANIA"],
            ["BRASIL", "ARGENTINA", "ESTADOS UNIDOS"]
        ]
    }
};

// 当前活跃的测验实例
let currentQuiz = null;
let posActual = 0;
let cantidadAcertadas = 0;

// 通用启动函数，根据传入的测验标识加载对应数据
function startQuiz(quizId) {
    posActual = 0;
    cantidadAcertadas = 0;
    currentQuiz = quizzes[quizId];
    // 切换页面显示状态
    document.getElementById("pantalla-inicial").style.display = "none";
    document.getElementById("pantalla-juego").style.display = "block";
    cargarBandera();
}

// 加载当前测验的题目与选项
function cargarBandera(){
    if(currentQuiz.flags.length <= posActual){
        terminarJuego();
    } else {
        limpiarOpciones();
        document.getElementById("imgBandera").src = "img/" + currentQuiz.flags[posActual];
        document.getElementById("n0").innerHTML = currentQuiz.options[posActual][0];
        document.getElementById("n1").innerHTML = currentQuiz.options[posActual][1];
        document.getElementById("n2").innerHTML = currentQuiz.options[posActual][2];
    }
}

// 验证答案逻辑，读取当前测验的正确答案
function comprobarRespuesta(opElegida){
    if(opElegida === currentQuiz.correctAnswers[posActual]){
        document.getElementById("n" + opElegida).className = "nombre nombreAcertada";
        document.getElementById("l" + opElegida).className = "letra letraAcertada";
        cantidadAcertadas++;
    } else {
        document.getElementById("n" + opElegida).className = "nombre nombreNoAcertada";
        document.getElementById("l" + opElegida).className = "letra letraNoAcertada";
        // 标记正确答案
        document.getElementById("n" + currentQuiz.correctAnswers[posActual]).className = "nombre nombreAcertada";
        document.getElementById("l" + currentQuiz.correctAnswers[posActual]).className = "letra letraAcertada";
    }
    posActual++;
    setTimeout(cargarBandera, 1000);
}

// 结束游戏，计算当前测验的正确率
function terminarJuego(){
    document.getElementById("pantalla-juego").style.display = "none";
    document.getElementById("pantalla-final").style.display = "block";
    document.getElementById("numCorrectas").innerHTML = cantidadAcertadas;
    document.getElementById("numIncorrectas").innerHTML = currentQuiz.flags.length - cantidadAcertadas;
}

// 以下函数保持原有逻辑不变
function limpiarOpciones(){
    document.getElementById("n0").className = "nombre";
    document.getElementById("n1").className = "nombre";
    document.getElementById("n2").className = "nombre";

    document.getElementById("l0").className = "letra";
    document.getElementById("l1").className = "letra";
    document.getElementById("l2").className = "letra";
}

function volverAlInicio(){
    document.getElementById("pantalla-final").style.display = "none";
    document.getElementById("pantalla-inicial").style.display = "block";
    document.getElementById("pantalla-juego").style.display = "none";
}

第三步：扩展说明 #

• 后续如果需要新增更多测验，只需在quizzes对象中添加新的测验数据，再在HTML中新增对应启动按钮即可，无需修改核心交互逻辑。
• 若未来测验逻辑出现差异化需求，再考虑拆分多个JS文件，当前场景下单文件维护更高效。

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