import React, { useState, useEffect, useMemo } from 'react';

// Tailwind CSS is assumed to be available in the environment

const chapter6Questions = [
    {
        "question": "中期财务会计报告中的“中期”,是指( )。",
        "hint": "“中期”通常是指一个会计年度内，短于一年的报告期间。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "短于一个月", "rationale": "短于一个月通常不作为中期财务报告的期间。", "isCorrect": false },
            { "text": "短于一个会计年度", "rationale": "中期财务报告涵盖的期间短于一个完整的会计年度，例如季度或半年度。", "isCorrect": true },
            { "text": "短于半年", "rationale": "中期可以短于半年（如季度），也可以是半年。", "isCorrect": false },
            { "text": "短于一个季度", "rationale": "短于一个季度通常不作为中期财务报告的期间。", "isCorrect": false }
        ]
    },
    {
        "question": "中期财务报告不应当包括的内容是()。",
        "hint": "完整的财务报告体系通常包括四表一注，但中期报告可能有所简化。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "资产负债表", "rationale": "中期财务报告通常包括资产负债表。", "isCorrect": false },
            { "text": "利润表", "rationale": "中期财务报告通常包括利润表。", "isCorrect": false },
            { "text": "现金流量表", "rationale": "中期财务报告通常包括现金流量表。", "isCorrect": false },
            { "text": "所有者权益变动表", "rationale": "根据我国准则，中期财务报告至少包括资产负债表、利润表、现金流量表和财务报表附注。所有者权益变动表并非强制要求在中期报告中单独列示，但其信息可在附注中披露。", "isCorrect": true }
        ]
    },
    {
        "question": "中期财务报告中,( )可以适当简化,但应当遵循重要性原则。",
        "hint": "财务报表附注是报表的补充说明，可以根据重要性原则进行适当简化。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "利润表", "rationale": "利润表是主要报表，不能随意简化。", "isCorrect": false },
            { "text": "资产负债表", "rationale": "资产负债表是主要报表，不能随意简化。", "isCorrect": false },
            { "text": "现金流量表", "rationale": "现金流量表是主要报表，不能随意简化。", "isCorrect": false },
            { "text": "财务报表附注", "rationale": "中期财务报告中的财务报表附注可以适当简化，但应遵循重要性原则。", "isCorrect": true }
        ]
    },
    {
        "question": "某股份有限公司是一家需要编制季度财务会计报告的上市公司。下列会计报表中,不需要该公司在其2×24年第三季度财务会计报告中披露的是( )。",
        "hint": "季度报告通常需要提供本季度和年初至本季度末的期间数据，以及上年可比期间的比较数据。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "2×23年年末资产负债表", "rationale": "第三季度报告需要提供本中期末（2×24年9月30日）和上年度末（2×23年12月31日）的资产负债表。", "isCorrect": false },
            { "text": "2×23年第三季度利润表", "rationale": "需要提供本中期利润表（2×24年第三季度）和上年可比中期利润表（2×23年第三季度）的比较数据。", "isCorrect": false },
            { "text": "2×23年年初至第三季度末利润表", "rationale": "需要提供本年度初至本中期末（2×24年1月1日至9月30日）和上年度可比期间（2×23年1月1日至9月30日）的利润表。", "isCorrect": false },
            { "text": "2×23年第三季度现金流量表", "rationale": "现金流量表通常提供年初至本中期末的数据和上年可比期间的数据，而不单独列示单个中期现金流量表。", "isCorrect": true }
        ]
    },
    {
        "question": "下列有关中期财务报告的表述中,符合现行会计准则规定的是()。",
        "hint": "中期会计计量应与年度会计计量保持一致，并考虑期间的特点。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "中期会计报表的附注应当以本中期期间为基础编制", "rationale": "中期会计报表附注应当以会计年度年初至本中期末为基础编制。", "isCorrect": false },
            { "text": "中期会计计量应当以年初至本中期末为基础", "rationale": "中期会计计量应当以年初至本中期末为基础进行，而不是仅考虑本中期的数据。", "isCorrect": true },
            { "text": "编制中期会计报表时应当以年度数据为基础进行重要性判断", "rationale": "重要性判断应以预计的年度财务数据为基础，同时考虑中期财务数据。", "isCorrect": false },
            { "text": "对于年度中不均匀发生的费用,在中期会计报表中应当采用预提或待摊的方法处理", "rationale": "对于年度中不均匀发生的费用，通常不适用预提或待摊，而是在发生时确认，或者如果能够可靠估计，可以进行分摊。", "isCorrect": false }
        ]
    },
    {
        "question": "对于应当编制合并会计报表的上市公司,其中期财务报告应当()。",
        "hint": "上市公司中期报告的合并要求。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "提供合并会计报表", "rationale": "上市公司应提供合并会计报表。", "isCorrect": false },
            { "text": "提供母公司会计报表", "rationale": "上市公司应提供母公司会计报表。", "isCorrect": false },
            { "text": "同时提供合并会计报表和母公司会计报表", "rationale": "上市公司中期财务报告应当同时提供合并会计报表和母公司会计报表。", "isCorrect": true },
            { "text": "提供合并会计报表或母公司会计报表", "rationale": "应同时提供，而非选择其一。", "isCorrect": false }
        ]
    },
    {
        "question": "上市公司2×24年第三季度现金流量表反映的现金流量是()。",
        "hint": "现金流量表通常反映的是累积期间的现金流。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "7—9月的现金流量", "rationale": "这是单个季度的现金流量，现金流量表通常反映累计期间。", "isCorrect": false },
            { "text": "1—6月的现金流量", "rationale": "这是上半年的现金流量。", "isCorrect": false },
            { "text": "1—9月的现金流量", "rationale": "季度现金流量表通常反映从年初到本季度末的累计现金流量。", "isCorrect": true },
            { "text": "上年7-9月的现金流量", "rationale": "这是比较期间的数据，不是本期的主要反映内容。", "isCorrect": false }
        ]
    },
    {
        "question": "甲公司为一家需要编制季度财务报告的企业,但无须单独披露第四季度财务报告,假设企业在第四季度对固定资产折旧年限的估计作了重大变更,则应当在其( )中披露变更的内容、理由及其影响金额。",
        "hint": "会计估计变更的披露要求，特别是在没有单独报告最后一个中期的情况下。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "年度会计报表附注", "rationale": "如果最后一个中期不单独编制财务报告，则在年度财务报告的附注中披露该中期发生的会计估计变更。", "isCorrect": true },
            { "text": "年度财务情况说明书", "rationale": "财务情况说明书是年度报告的一部分，但会计估计变更的具体披露应在会计报表附注中。", "isCorrect": false },
            { "text": "第三季度会计报表附注", "rationale": "变更发生在第四季度，不应在第三季度附注中披露。", "isCorrect": false },
            { "text": "中期会计报表附注", "rationale": "这里的“中期会计报表附注”可能是指第四季度附注，但题目已说明无须单独披露第四季度报告。", "isCorrect": false }
        ]
    },
    {
        "question": "企业在判断重要性程度时,应当采用的比较基础是()。",
        "hint": "中期报告的重要性判断应与年度报告保持一致。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "预计的年度财务数据", "rationale": "中期财务报告重要性的判断，应以预计的年度财务数据为基础，以确保与年度报告的一致性。", "isCorrect": true },
            { "text": "中期财务数据", "rationale": "仅以中期数据为基础可能导致判断偏差，因为中期数据可能受季节性或临时性因素影响。", "isCorrect": false },
            { "text": "预计的中期财务数据", "rationale": "虽然预测中期数据有一定参考意义，但主要基础仍是预计年度数据。", "isCorrect": false },
            { "text": "上年度的年度财务数据", "rationale": "上年度数据是重要的比较信息，但不是判断本期重要性的基础。", "isCorrect": false }
        ]
    },
    {
        "question": "下列事项中,中期会计报表附注中可以不包括的内容是( )",
        "hint": "中期报告附注的披露应遵循重要性原则，可以适当简化。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "存在共同控制关系的关联企业发生变化的情况", "rationale": "关联方关系变化是重要信息，需要披露。", "isCorrect": false },
            { "text": "向所有者分配的每股股利", "rationale": "分配股利是重要事项，需要披露。", "isCorrect": false },
            { "text": "存在重大影响关系的长期股权投资的购买", "rationale": "重大投资事项是重要信息，需要披露。", "isCorrect": false },
            { "text": "债务性证券的发行情况", "rationale": "债务性证券发行是重要筹资活动，需要披露。", "isCorrect": false }
        ]
    },
    {
        "question": "甲公司出于上市需要对外提供季度报告,对外提供的2×24年第二季度的利润表中不应当包括的时点数据是( )。",
        "hint": "利润表反映的是会计期间的经营成果，不是时点数据。",
        "type": "single-choice",
        "answerOptions": [
            { "text": "2×24年4月1日至4月30日", "rationale": "利润表反映的是期间数据，而不是一个月的时点数据，且通常是季度或半年报告。", "isCorrect": true },
            { "text": "2×24年4月1日至6月30日", "rationale": "这是第二季度的期间数据，属于利润表的范围。", "isCorrect": false },
            { "text": "2×24年1月1日至6月30日", "rationale": "这是年初至第二季度末的期间数据，属于利润表的范围。", "isCorrect": false },
            { "text": "2×23年1月1日至6月30日", "rationale": "这是上年可比期间的期间数据，属于利润表的范围。", "isCorrect": false }
        ]
    },
    {
        "question": "中期财务报告至少应当包括()。",
        "hint": "中期财务报告应至少包含哪些核心报表？",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "资产负债表", "rationale": "资产负债表是中期报告的核心组成部分。", "isCorrect": true },
            { "text": "利润表", "rationale": "利润表是中期报告的核心组成部分。", "isCorrect": true },
            { "text": "现金流量表", "rationale": "现金流量表是中期报告的核心组成部分。", "isCorrect": true },
            { "text": "所有者权益变动表", "rationale": "所有者权益变动表并非强制要求在中期报告中单独列示，但其信息可在附注中披露。", "isCorrect": false },
            { "text": "财务报表附注", "rationale": "财务报表附注是中期报告的核心组成部分，对报表进行补充说明。", "isCorrect": true }
        ]
    },
    {
        "question": "在中期财务报告中,企业应当提供的比较会计报表包括( )。",
        "hint": "中期报告需要与哪些期间的数据进行比较？",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "本中期末的资产负债表和上年度末的资产负债表", "rationale": "资产负债表需要与上年度末进行比较。", "isCorrect": true },
            { "text": "本中期的利润表", "rationale": "本中期的利润表是报告期数据，通常与上年可比中期进行比较。", "isCorrect": true },
            { "text": "年初至本中期末的利润表以及上年度可比期间的利润表", "rationale": "利润表需要提供累计期间和上年可比期间的数据。", "isCorrect": true },
            { "text": "年初至本中期末的现金流量表和上年度年初至可比中期末的现金流量表", "rationale": "现金流量表需要提供累计期间和上年可比期间的数据。", "isCorrect": true },
            { "text": "本中期的现金流量表", "rationale": "现金流量表通常不单独提供本中期的，而是年初至今的。", "isCorrect": false }
        ]
    },
    {
        "question": "中期会计报表的编制原则包括( )。",
        "hint": "中期报告的编制应在年度报告原则基础上，考虑特殊性。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "中期财务报告中各会计要素的确认与计量标准应当与年度财务报告所采用的原则相一致", "rationale": "中期报告应遵循与年度报告一致的确认和计量原则。", "isCorrect": true },
            { "text": "企业财务报告的频率不应当影响其年度结果的计量", "rationale": "中期报告的编制不应影响年度报告的准确性。", "isCorrect": true },
            { "text": "对于季度性取得的收入应当在中期会计报表中预计或者递延", "rationale": "对于周期性或季度性取得的收入，通常在发生时确认，不应预计或递延。", "isCorrect": false },
            { "text": "对于周期性取得的收入,企业应当在发生时予以确认和计量,不应当在中期报表中预计或递延", "rationale": "周期性收入应在发生时确认，不应进行预计或递延。", "isCorrect": true },
            { "text": "递延会计年度中不均匀发生的费用,应当在中期会计报表中预提或待摊", "rationale": "不均匀发生的费用如果能可靠估计，可合理分摊；否则，在发生时确认。", "isCorrect": false }
        ]
    },
    {
        "question": "下列有关中期财务报告的表述中,符合现行会计准则规定的有()。",
        "hint": "中期报告应在保证信息质量的前提下，合理简化。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "中期会计报表应当采用与年度会计报表相一致的会计政策", "rationale": "会计政策的一致性是中期报告编制的基本要求。", "isCorrect": true },
            { "text": "中期会计报表附注应当以会计年度年初至本中期末为基础编制", "rationale": "附注的披露应基于累计期间的数据。", "isCorrect": true },
            { "text": "中期会计报表项目重要性程度的判断应当以预计的年度财务数据为基础", "rationale": "重要性判断应以预计的年度数据为主要基础。", "isCorrect": true },
            { "text": "对于会计年度内不均匀取得的收入,在中期会计报表中不能采用预计方法处理", "rationale": "不均匀收入通常在发生时确认，不进行预计。", "isCorrect": true },
            { "text": "对于会计年度内不均匀取得的费用,在中期会计报表中不能采用预提方法处理", "rationale": "不均匀费用通常在发生时确认，不进行预提。", "isCorrect": true }
        ]
    },
    {
        "question": "下列关于上市公司中期报告的表述中,正确的有( )。",
        "hint": "上市公司中期报告的特殊要求。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "中期会计计量应以年初至本中期末为基础", "rationale": "中期会计计量是基于累计期间的。", "isCorrect": true },
            { "text": "中期报告中应同时提供合并报表和母公司报表", "rationale": "上市公司中期报告通常要求同时提供合并和母公司报表。", "isCorrect": true },
            { "text": "中期报表仅是年度报表项目的节选,不是完整的报表", "rationale": "中期报表虽可简化附注，但仍然是一个独立的、完整的财务报告，具有法律效力。", "isCorrect": false },
            { "text": "对中期报表项目进行重要性判断应以预计的年度数据为基础", "rationale": "重要性判断应考虑预计的年度数据。", "isCorrect": true },
            { "text": "中期报表中各会计要素的确认与计量标准应当与年度报表相一致", "rationale": "确认与计量标准应保持一致。", "isCorrect": true }
        ]
    },
    {
        "question": "我国上市公司编制的半年度资产负债表中的日期为( )。",
        "hint": "半年度报告的时间点。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "本会计年度前6个月的最后一天", "rationale": "半年度资产负债表是时点报表，反映本会计年度上半年末的财务状况。", "isCorrect": true },
            { "text": "上个会计年度的最后一天", "rationale": "半年度报告需要提供上个会计年度末的比较数据。", "isCorrect": true },
            { "text": "本会计年度前3个月的最后一天", "rationale": "这是第一季度末的日期。", "isCorrect": false },
            { "text": "上个会计年度前6个月的最后一天", "rationale": "这是上个半年度末的日期。", "isCorrect": false },
            { "text": "上个会计年度前3个月的最后一天", "rationale": "这是上个第一季度末的日期。", "isCorrect": false }
        ]
    },
    {
        "question": "我国上市公司半年度中期的利润表及所有者权益变动表的报告期间为( )。",
        "hint": "利润表和所有者权益变动表是期间报表。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "本会计年度前6个月", "rationale": "半年度利润表和所有者权益变动表反映的是本会计年度前六个月的经营成果和权益变动。", "isCorrect": true },
            { "text": "上个会计年度前3个月", "rationale": "这是上个第一季度的期间。", "isCorrect": false },
            { "text": "本会计年度前3个月", "rationale": "这是本会计年度第一季度的期间。", "isCorrect": false },
            { "text": "上个会计年度前6个月", "rationale": "这是上个半年度的期间。", "isCorrect": true },
            { "text": "上年全年度", "rationale": "半年度报告通常不会直接提供上年全年度的数据作为本期的对比期间，而是上年可比的半年度。", "isCorrect": false }
        ]
    },
    {
        "question": "按有关规定,半年度中期会计报表附注中应当披露的内容有()。",
        "hint": "中期报告附注的披露内容应涵盖重要信息。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "债务性证券的偿还", "rationale": "债务性证券的偿还是重要财务事项，需要披露。", "isCorrect": true },
            { "text": "会计估计变更情况", "rationale": "会计估计变更对报表有影响，需要披露。", "isCorrect": true },
            { "text": "存在控制关系的关联方关系的变化", "rationale": "关联方关系变化是重要信息，需要披露。", "isCorrect": true },
            { "text": "一般或有事项", "rationale": "如果是一般或有事项且不重要，则可以不披露。", "isCorrect": false },
            { "text": "重大会计差错更正情况", "rationale": "重大会计差错更正对报表有重大影响，需要披露。", "isCorrect": true }
        ]
    },
    {
        "question": "会计政策变更发生在会计年度内第一季度以外的其他季度,除按规定作相应处理外,在会计报表附注的披露方面,企业需要披露()。",
        "hint": "会计政策变更的披露需要追溯调整并披露影响。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "会计政策变更对以前年度的累积影响数", "rationale": "会计政策变更需要追溯调整，因此需要披露对以前年度的累积影响。", "isCorrect": true },
            { "text": "会计政策变更对当年度变更季度损益的影响数", "rationale": "需要披露对变更发生当期的影响。", "isCorrect": true },
            { "text": "会计政策变更对当年年初至变更季度末损益的影响数", "rationale": "需要披露对累计期间的影响。", "isCorrect": true },
            { "text": "会计政策变更对当年度会计政策变更前各季度损益的影响数", "rationale": "需要披露对已报告的各期损益的影响。", "isCorrect": true },
            { "text": "会计政策变更对比较会计报表相关项目的调整数", "rationale": "追溯调整后，比较报表也需要调整并披露调整数。", "isCorrect": false }
        ]
    },
    {
        "question": "2×24年第二季度财务报告应当提供的财务报表包括( )。",
        "hint": "季度报告的比较报表应涵盖哪些期间。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "2×24年6月30日和2×23年12月31日的资产负债表", "rationale": "资产负债表需要提供本中期末和上年度末的比较数据。", "isCorrect": true },
            { "text": "2×24年1月1日至6月30日和2×23年1月1日至6月30日的利润表", "rationale": "利润表需要提供本年年初至本中期末和上年可比期间的比较数据。", "isCorrect": true },
            { "text": "2×24年4月1日至6月30日和2×23年4月1日至6月30日的利润表", "rationale": "这是本季度和上年可比季度的利润表，也应提供。", "isCorrect": true },
            { "text": "2×24年4月1日至6月30日和2×23年4月1日至6月30日的现金流量表", "rationale": "现金流量表通常提供累计期间的数据，不单独提供本季度数据。", "isCorrect": false },
            { "text": "2×24年1月1日至6月30日和2×23年1月1日至6月30日的现金流量表", "rationale": "现金流量表需要提供本年年初至本中期末和上年可比期间的比较数据。", "isCorrect": true }
        ]
    },
    {
        "question": "甲公司为上市公司,2×24年6月30日需要编制中期财务报告时,提供的现金流量表的时点涵盖( )。",
        "hint": "现金流量表是期间报表，反映的是特定期间内的现金流动。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "2×24年1月1日至6月30日", "rationale": "现金流量表反映的是本会计年度年初至本中期末的现金流量。", "isCorrect": true },
            { "text": "2×23年1月1日至6月30日", "rationale": "现金流量表需要提供上年可比期间的现金流量作为比较。", "isCorrect": true },
            { "text": "2×24年4月1日至6月30日", "rationale": "虽然这是本季度的数据，但通常现金流量表提供的是年初至今的累计数据。", "isCorrect": false },
            { "text": "2×23年4月1日至6月30日", "rationale": "这是上年可比季度的现金流量，通常现金流量表提供的是年初至今的累计数据。", "isCorrect": false },
            { "text": "2×23年1月1日至12月31日", "rationale": "这是上年全年数据，虽然用于比较，但不是中期现金流量表直接涵盖的时点。", "isCorrect": false }
        ]
    },
    {
        "question": "企业在确认、计量和披露中期财务报告中列报的会计报表项目时,下列说法中正确的有( )。",
        "hint": "中期报告在准确性和简化之间寻找平衡。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "应当遵循重要性原则", "rationale": "中期报告也应遵循重要性原则。", "isCorrect": true },
            { "text": "在判断项目的重要性程度时,应当以中期财务数据为基础,不应以预计的年度财务数据为基础", "rationale": "重要性判断应以预计的年度数据为基础，同时考虑中期数据。", "isCorrect": false },
            { "text": "与年度财务数据相比,中期会计计量可在更大程度上依赖于估计", "rationale": "由于中期报告的及时性要求和信息量限制，可能在一定程度上更多依赖于估计。", "isCorrect": true },
            { "text": "在判断项目的重要性程度时,应当以预计的年度财务数据为基础,不应以中期财务数据为基础", "rationale": "重要性判断应以预计的年度数据为基础。", "isCorrect": true },
            { "text": "为保证财务数据的正确性,中期会计计量较少依赖于估计", "rationale": "中期报告可能更多依赖于估计。", "isCorrect": false }
        ]
    },
    {
        "question": "某上市公司在2×24年第三季度发生了会计政策变更,则该公司在其2×24年第三季度财务报告的会计报表附注中应该披露有关会计政策变更的信息有( )。",
        "hint": "会计政策变更需要追溯调整，披露其对各项财务指标的影响。",
        "type": "multi-choice",
        "answerOptions": [
            { "text": "对2×23年第三季度净利润的影响数", "rationale": "需要披露对可比期间净利润的影响。", "isCorrect": true },
            { "text": "对2×24年年初至第三季度末净利润的影响数", "rationale": "需要披露对本年累计期间净利润的影响。", "isCorrect": true },
            { "text": "对2×24年第一季度净利润的影响数", "rationale": "需要披露对变更前已报告期间净利润的影响。", "isCorrect": true },
            { "text": "对2×24年第二季度净利润的影响数", "rationale": "需要披露对变更前已报告期间净利润的影响。", "isCorrect": true },
            { "text": "对2×24年第三季度净利润的影响数", "rationale": "需要披露对变更发生当期净利润的影响。", "isCorrect": true }
        ]
    },
    {
        "question": "中期财务报表计量相对于年度财务数据的计量而言,在很大程度上依赖于估计。",
        "hint": "中期报告的特点决定了其对估计的依赖程度。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "由于中期报告的及时性和成本效益原则，相对于年度报告，其会计计量可能在更大程度上依赖于估计。", "isCorrect": true },
            { "text": "错误", "rationale": "该表述符合中期报告的特点。", "isCorrect": false }
        ]
    },
    {
        "question": "报告中期内处置了所有应纳入合并范围的子公司的,中期财务报告中仍需要包括合并财务报表。",
        "hint": "处置子公司对合并报表编制的影响。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "如果报告中期内处置了所有子公司，则在处置日之后不再纳入合并范围，但处置前的期间仍需编制合并报表，并披露处置相关信息。", "isCorrect": false },
            { "text": "错误", "rationale": "如果报告中期内处置了所有子公司，则在处置日之后不再纳入合并范围，但处置前的期间仍需编制合并报表，并披露处置相关信息。因此，说“仍需要包括合并财务报表”是错误的，因为处置后就不再包括了，仅包括处置前的期间。", "isCorrect": true }
        ]
    },
    {
        "question": "会计年度内不均匀取得的收入,在中期财务报表中不能采用预计方法处理。",
        "hint": "收入确认的权责发生制原则和中期报告的特殊性。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "对于会计年度内不均匀取得的收入（如季节性收入），在中期财务报表中通常不应采用预计或递延的方法，而应在实际发生时确认。", "isCorrect": true },
            { "text": "错误", "rationale": "该表述符合中期报告对不均匀收入的处理原则。", "isCorrect": false }
        ]
    },
    {
        "question": "中期财务报告应当采用与年度财务报告相一致的会计政策。",
        "hint": "会计政策的一致性是财务报告的基本要求。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "中期财务报告和年度财务报告应采用一致的会计政策，以保证财务信息的可比性。", "isCorrect": true },
            { "text": "错误", "rationale": "该表述符合中期报告编制的会计政策一致性原则。", "isCorrect": false }
        ]
    },
    {
        "question": "中期财务报告中一定不会有所有者权益变动表。",
        "hint": "所有者权益变动表在中期报告中是否强制披露。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "根据我国准则，中期财务报告可以不单独列示所有者权益变动表，但其信息应在附注中披露。所以说“一定不会有”过于绝对。", "isCorrect": false },
            { "text": "错误", "rationale": "中期财务报告中可以有所有者权益变动表，只是并非强制性要求单独列报。", "isCorrect": true }
        ]
    },
    {
        "question": "中期财务报告中各会计要素的确认和计量因为财务报告期间的缩短可以有别于年度财务报表所采用的原则。",
        "hint": "中期报告与年度报告在确认和计量原则上的一致性。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "中期报告的确认和计量原则应与年度报告保持一致，以确保财务信息的可比性。", "isCorrect": false },
            { "text": "错误", "rationale": "中期财务报告中各会计要素的确认和计量应当与年度财务报告所采用的原则相一致，不因期间缩短而改变。", "isCorrect": true }
        ]
    },
    {
        "question": "对于本年度中期内发生的调整以前年度损益事项,不必调整本年度财务报表相关项目的年初数。",
        "hint": "会计差错更正的处理原则。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "调整以前年度损益的事项（如会计差错更正）需要追溯调整，影响年初数，并调整比较报表。", "isCorrect": false },
            { "text": "错误", "rationale": "对于本年度中期内发生的调整以前年度损益事项，应当追溯调整本年度财务报表相关项目的年初数，并调整比较财务报表的相关项目。", "isCorrect": true }
        ]
    },
    {
        "question": "甲公司2×22年提供的半年度中期财务报告中的资产负债表的上年度比较财务报表时间是2×21年6月30日。",
        "hint": "资产负债表比较数据的时间点。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "半年度资产负债表通常与上一个会计年度的年末资产负债表进行比较，而不是与上年同期资产负债表比较。", "isCorrect": false },
            { "text": "错误", "rationale": "半年度中期财务报告中的资产负债表，其比较数据是上一个会计年度的期末资产负债表（即2×21年12月31日）。", "isCorrect": true }
        ]
    },
    {
        "question": "中期财务报告中的附注应当以年初至本中期末为基础进行编制。",
        "hint": "附注的编制基础。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "中期财务报告附注的披露内容通常以年初至本中期末为基础进行编制，以反映累计期间的信息。", "isCorrect": true },
            { "text": "错误", "rationale": "该表述符合中期财务报告附注的编制原则。", "isCorrect": false }
        ]
    },
    {
        "question": "报告中期内处置了所有应纳入合并范围的子公司的,在提供上年度比较财务报表时应当同时提供合并财务报表和母公司报表。",
        "hint": "处置子公司后，合并报表的提供要求。",
        "type": "true-false",
        "answerOptions": [
            { "text": "正确", "rationale": "即使处置了所有子公司，为了提供可比信息，上年度的比较财务报表仍应提供合并财务报表和母公司报表。", "isCorrect": true },
            { "text": "错误", "rationale": "该表述符合处置子公司后提供比较财务报表的要求。", "isCorrect": false }
        ]
    }
];

// Helper function to check if a question is multi-choice
const isMultiChoiceQuestion = (question) => {
    return question.type === 'multi-choice';
};

// Helper function to compare two arrays for equality (order-agnostic)
const arraysEqual = (a, b) => {
    if (a === null || b === null) return false; // Handle nulls for selectedAnswers
    if (a.length !== b.length) return false;
    const sortedA = [...a].sort();
    const sortedB = [...b].sort();
    for (let i = 0; i < sortedA.length; i++) {
        if (sortedA[i] !== sortedB[i]) return false;
    }
    return true;
};

const QuestionCard = ({ questionData, onAnswerSelected, onConfirmAnswer, selectedAnswers, showRationale, isAnswerChecked }) => {
    const isMulti = isMultiChoiceQuestion(questionData);

    const handleOptionChange = (optionText, checked) => {
        if (isMulti) {
            onAnswerSelected(prev => {
                if (checked) {
                    return [...prev, optionText];
                } else {
                    return prev.filter(item => item !== optionText);
                }
            });
        } else {
            onAnswerSelected(optionText);
        }
    };

    return (
        <div className="bg-white p-6 rounded-xl shadow-lg w-full max-w-xl mx-auto mb-6 border border-gray-200">
            <h2 className="text-xl font-semibold mb-4 text-gray-800">{questionData.question}</h2>
            <p className="text-sm text-gray-500 mb-4 italic">提示: {questionData.hint}</p>
            <div className="space-y-3">
                {questionData.answerOptions.map((option, index) => {
                    // Determine if this option is selected by the user
                    const isSelectedByUser = isMulti ? selectedAnswers.includes(option.text) : selectedAnswers === option.text;
                    const isCorrectOption = option.isCorrect;

                    let buttonClass = 'bg-blue-50 hover:bg-blue-100 border-blue-200 text-blue-900';

                    if (isAnswerChecked) {
                        if (isCorrectOption) {
                            // Correct option, always green when checked
                            buttonClass = 'bg-green-100 border-green-500 text-green-800 shadow-md';
                        } else if (isSelectedByUser && !isCorrectOption) {
                            // User selected this option AND it's incorrect, mark red
                            buttonClass = 'bg-red-100 border-red-500 text-red-800 shadow-md';
                        } else {
                            // Unselected option that is either incorrect or correct (but user didn't pick it)
                            buttonClass = 'bg-gray-50 border-gray-200 text-gray-700';
                        }
                    } else if (isSelectedByUser) {
                        // User has selected this but answer not checked yet (pre-submission state)
                        buttonClass = 'bg-blue-200 border-blue-400 text-blue-900 shadow-md';
                    }

                    return (
                        <label
                            key={index}
                            className={`
                                w-full flex items-center p-3 rounded-lg border cursor-pointer
                                ${buttonClass}
                                transition-all duration-200 ease-in-out
                            `}
                        >
                            <input
                                type={isMulti ? "checkbox" : "radio"}
                                name="answer"
                                value={option.text}
                                checked={isSelectedByUser}
                                onChange={(e) => handleOptionChange(option.text, e.target.checked)}
                                disabled={isAnswerChecked && !isMulti} // Disable for single choice after selection, and all after multi-choice confirm
                                className="mr-3 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                            />
                            <span className="font-medium flex-grow">{String.fromCharCode(65 + index)}. {option.text}</span>
                            {/* Rationale displayed below option text, only when isAnswerChecked is true */}
                            {showRationale && isAnswerChecked && (isCorrectOption || (isSelectedByUser && !isCorrectOption)) && (
                                <p className="mt-2 text-sm italic font-normal text-gray-700 w-full ml-7">
                                    解析: {option.rationale}
                                </p>
                            )}
                        </label>
                    );
                })}
            </div>
            {isMulti && !isAnswerChecked && (
                <div className="mt-6 text-center">
                    <button
                        onClick={onConfirmAnswer}
                        disabled={selectedAnswers.length === 0}
                        className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300"
                    >
                        确认答案
                    </button>
                </div>
            )}
        </div>
    );
};

const ResultsSummary = ({ score, totalQuestions, questions, restartQuiz }) => {
    return (
        <div className="bg-white p-8 rounded-xl shadow-lg w-full max-w-2xl mx-auto border border-gray-200">
            <h2 className="text-3xl font-bold text-center mb-6 text-gray-800">测验结果</h2>
            <p className="text-xl text-center mb-8 text-gray-700">
                您的得分是: <span className="font-extrabold text-blue-600">{score}</span> / {totalQuestions}
            </p>

            <div className="space-y-6 max-h-96 overflow-y-auto pr-2 custom-scrollbar">
                {questions.map((q, qIndex) => {
                    const isMulti = isMultiChoiceQuestion(q);
                    const userAnswer = isMulti ? (q.userSelectedOptions?.join(', ') || "未作答") : (q.userSelectedOptions || "未作答");
                    const correctOptions = q.answerOptions.filter(opt => opt.isCorrect).map(opt => opt.text);
                    const correctAnswerText = correctOptions.join(', ');
                    const isCorrect = q.isAnsweredCorrectly; // Use the stored correctness

                    return (
                        <div key={qIndex} className="p-4 rounded-lg border border-gray-300 bg-gray-50 shadow-sm">
                            <h3 className="font-semibold text-lg mb-2 text-gray-700">问题 {qIndex + 1}: {q.question}</h3>
                            <p className="text-gray-600">
                                您的回答: <span className={`font-medium ${isCorrect ? 'text-green-600' : 'text-red-600'}`}>{userAnswer}</span>
                                {!isCorrect && userAnswer !== "未作答" && (
                                    <span className="ml-2 text-red-500 text-sm">(错误)</span>
                                )}
                            </p>
                            <p className="text-gray-600">
                                正确答案: <span className="font-medium text-green-600">{correctAnswerText}</span>
                            </p>
                            <p className="mt-2 text-sm italic text-gray-500">
                                解析: {q.answerOptions.find(opt => opt.isCorrect)?.rationale || "无解析"}
                            </p>
                        </div>
                    );
                })}
            </div>

            <div className="flex justify-center mt-8">
                <button
                    onClick={restartQuiz}
                    className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300"
                >
                    重新开始测验
                </button>
            </div>
        </div>
    );
};

const App = () => {
    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
    const [score, setScore] = useState(0);
    const [showResults, setShowResults] = useState(false);
    const [questions, setQuestions] = useState([]);
    const [selectedAnswers, setSelectedAnswers] = useState([]); // Stores selected answers for current question
    const [isAnswerChecked, setIsAnswerChecked] = useState(false); // True if answer submitted/evaluated

    const [isShuffled, setIsShuffled] = useState(false);

    // Memoize the initial questions to avoid re-shuffling on re-renders
    const initialQuestions = useMemo(() => {
        return chapter6Questions.map(q => ({
            ...q,
            // We want options to be consistently shuffled for a given question across resets,
            // but reshuflled when 'resetQuiz' is specifically called for a new quiz instance.
            // So, shuffle them once here, and then again in resetQuiz if needed.
            answerOptions: [...q.answerOptions].sort(() => Math.random() - 0.5),
            userSelectedOptions: null, // Initialize user selected options (null for single, [] for multi)
            isAnsweredCorrectly: false, // Initialize correctness for each question
        }));
    }, []);

    useEffect(() => {
        resetQuiz(isShuffled);
    }, [isShuffled, initialQuestions]); // Depend on isShuffled and initialQuestions

    const resetQuiz = (shuffle) => {
        let newQuestions = [...initialQuestions];
        if (shuffle) {
            newQuestions = newQuestions.sort(() => Math.random() - 0.5);
        }
        newQuestions = newQuestions.map(q => ({
            ...q,
            userSelectedOptions: isMultiChoiceQuestion(q) ? [] : null, // Reset answers based on type
            isAnsweredCorrectly: false,
            answerOptions: [...q.answerOptions].sort(() => Math.random() - 0.5) // Re-shuffle options for a new quiz instance
        }));
        setQuestions(newQuestions);
        setCurrentQuestionIndex(0);
        setScore(0);
        setShowResults(false);
        // Reset selected answers and checked status for the very first question when resetting
        setSelectedAnswers(isMultiChoiceQuestion(newQuestions[0]) ? [] : null);
        setIsAnswerChecked(false); 
    };

    const currentQuestion = questions[currentQuestionIndex];
    const isMulti = currentQuestion ? isMultiChoiceQuestion(currentQuestion) : false;

    // Handles selection for both single and multi-choice, but does not submit for multi-choice
    const handleAnswerSelected = (selectedOptionText) => {
        if (!isMulti) {
            // For single-choice, this immediately evaluates
            const isCorrect = currentQuestion.answerOptions.find(opt => opt.text === selectedOptionText)?.isCorrect;
            const updatedQuestions = [...questions];
            updatedQuestions[currentQuestionIndex].userSelectedOptions = selectedOptionText;
            updatedQuestions[currentQuestionIndex].isAnsweredCorrectly = isCorrect;
            setQuestions(updatedQuestions);
            setIsAnswerChecked(true); // Mark as checked

            if (isCorrect) {
                setScore(prevScore => prevScore + 1);
                // Auto-advance if correct
                setTimeout(() => {
                    handleNextClick(true); // Pass true to force advance
                }, 1500);
            }
        } else {
            // For multi-choice, just update the selectedAnswers array
            setSelectedAnswers(selectedOptionText);
        }
    };

    // Only called by the "确认答案" button for multi-choice questions
    const handleConfirmMultiChoiceAnswer = () => {
        if (!currentQuestion) return;

        const correctOptions = currentQuestion.answerOptions.filter(opt => opt.isCorrect).map(opt => opt.text);
        const userCorrect = arraysEqual(selectedAnswers, correctOptions);

        const updatedQuestions = [...questions];
        updatedQuestions[currentQuestionIndex].userSelectedOptions = selectedAnswers; // Store array
        updatedQuestions[currentQuestionIndex].isAnsweredCorrectly = userCorrect;
        setQuestions(updatedQuestions);
        setIsAnswerChecked(true); // Mark as checked

        if (userCorrect) {
            setScore(prevScore => prevScore + 1);
            setTimeout(() => {
                handleNextClick(true); // Pass true to force advance
            }, 1500);
        }
    };

    // Navigates to the previous question
    const handlePrevClick = () => {
        if (currentQuestionIndex > 0) {
            const prevIndex = currentQuestionIndex - 1;
            setCurrentQuestionIndex(prevIndex);
            const prevQ = questions[prevIndex];

            // Restore selection for the previous question
            setSelectedAnswers(prevQ.userSelectedOptions || (isMultiChoiceQuestion(prevQ) ? [] : null));
            // Show rationale if the previous question was answered
            const wasPreviouslyAnswered = (Array.isArray(prevQ.userSelectedOptions) && prevQ.userSelectedOptions.length > 0) ||
                                           (!Array.isArray(prevQ.userSelectedOptions) && prevQ.userSelectedOptions !== undefined && prevQ.userSelectedOptions !== null);
            setIsAnswerChecked(wasPreviouslyAnswered);
        }
    };

    // Navigates to the next question
    const handleNextClick = (forceAdvance = false) => {
        // Condition to allow moving forward from the *current* question:
        // - `forceAdvance` is true when auto-advancing after a correct answer (single-choice or multi-choice).
        // - `isAnswerChecked` is true when the current question's answer has been submitted (incorrect, or multi-choice manual confirm).
        if (forceAdvance || isAnswerChecked) {
            const nextIndex = currentQuestionIndex + 1;
            if (nextIndex < questions.length) {
                setCurrentQuestionIndex(nextIndex);
                const nextQ = questions[nextIndex];

                // Determine if the *new* question has a stored answer (meaning it was visited before)
                const hasStoredAnswer = (Array.isArray(nextQ.userSelectedOptions) && nextQ.userSelectedOptions.length > 0) ||
                                       (!Array.isArray(nextQ.userSelectedOptions) && nextQ.userSelectedOptions !== undefined && nextQ.userSelectedOptions !== null);

                // Set selection for the new question: restore if answered, otherwise clear
                if (hasStoredAnswer) {
                    setSelectedAnswers(nextQ.userSelectedOptions);
                } else {
                    setSelectedAnswers(isMultiChoiceQuestion(nextQ) ? [] : null); // Clear for new, unvisited questions
                }

                // Set isAnswerChecked for the new question: true if previously answered, false otherwise
                setIsAnswerChecked(hasStoredAnswer);

            } else {
                setShowResults(true); // All questions completed
            }
        }
    };

    const toggleShuffle = () => {
        setIsShuffled(prev => !prev);
    };

    if (questions.length === 0) {
        return <div className="flex items-center justify-center min-h-screen bg-gray-100 font-inter text-lg text-gray-700">加载中...</div>;
    }

    return (
        <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center p-4 font-sans text-gray-900">
            {showResults ? (
                <ResultsSummary
                    score={score}
                    totalQuestions={questions.length}
                    questions={questions}
                    restartQuiz={() => resetQuiz(isShuffled)}
                />
            ) : (
                <div className="flex flex-col items-center w-full max-w-2xl">
                    <div className="text-center mb-6">
                        <h1 className="text-3xl font-bold text-blue-800 drop-shadow-sm">第六章 中期财务报告刷题</h1>
                        <p className="text-lg text-gray-600 mt-2">
                            问题 {currentQuestionIndex + 1} / {questions.length}
                        </p>
                    </div>
                    <div className="mb-4 flex space-x-4">
                        <button
                            onClick={toggleShuffle}
                            className={`
                                py-2 px-5 rounded-full text-white font-semibold shadow-md transition-all duration-300 ease-in-out
                                ${isShuffled ? 'bg-purple-600 hover:bg-purple-700 focus:ring-purple-300' : 'bg-gray-500 hover:bg-gray-600 focus:ring-gray-300'}
                                focus:outline-none focus:ring-2
                            `}
                        >
                            {isShuffled ? '当前: 乱序练习' : '当前: 顺序练习'}
                        </button>
                         <button
                            onClick={() => resetQuiz(isShuffled)}
                            className="bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-5 rounded-full shadow-md transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-300"
                        >
                            重新开始本章
                        </button>
                    </div>
                    <QuestionCard
                        questionData={currentQuestion}
                        onAnswerSelected={handleAnswerSelected}
                        onConfirmAnswer={handleConfirmMultiChoiceAnswer}
                        selectedAnswers={selectedAnswers}
                        showRationale={isAnswerChecked}
                        isAnswerChecked={isAnswerChecked}
                    />
                    <div className="mt-4 flex justify-between w-full max-w-xl">
                        <button
                            onClick={handlePrevClick}
                            disabled={currentQuestionIndex === 0}
                            className="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full shadow-lg transition-all duration-300 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            上一题
                        </button>
                        <button
                            onClick={() => handleNextClick()}
                            // Enable Next only if current answer is checked/submitted OR if it's the last question already answered
                            disabled={!isAnswerChecked && currentQuestionIndex < questions.length -1}
                            className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow-lg transition-all duration-300 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed"
                        >
                            下一题
                        </button>
                    </div>
                </div>
            )}
        </div>
    );
};

export default App;