変数名は大事なので改変。
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Button } from "react-native";
import { useEffect, useState } from "react";
import { dataSetArray } from "./setData/dataSet";
export default function App() {
const [problemText, setProblemText] = useState("");
const [correctAnswerText, setCorrectAnswerText] = useState("");
const [explanationText, setExplanationText] = useState("");
const [totalAnswerNumber, setTotalAnswerNumber] = useState(0);
const [correctAnswerNumber, setCorrectAnswerNumber] = useState(0);
const [judgementText, setJudgementText] = useState("");
const [explanationSentence, setExplanationSentence] = useState("");
const [finishSentence, setFinishSentence] = useState("");
const createProblemHandler = () => {
const randomNumber = Math.floor(Math.random() * 2);
setProblemText(dataSetArray[randomNumber].problem);
setCorrectAnswerText(dataSetArray[randomNumber].correctAnswer);
setExplanationText(dataSetArray[randomNumber].explanation);
setExplanationSentence("");
setJudgementText("");
setFinishSentence("");
};
const pressHandler = (buttonTitle) => {
setTotalAnswerNumber((prevState) => prevState + 1);
if (buttonTitle == correctAnswerText) {
setJudgementText("Correct");
setExplanationSentence("");
setCorrectAnswerNumber((prevState) => prevState + 1);
} else {
setJudgementText("InCorrect");
setExplanationSentence(explanationText);
}
};
const pressHandler_a = () => {
pressHandler("a");
};
const pressHandler_b = () => {
pressHandler("b");
};
const pressHandler_c = () => {
pressHandler("c");
};
const pressHandler_d = () => {
pressHandler("d");
};
const finishHandler = () => {
setFinishSentence(
`解いた問題数は${totalAnswerNumber}です。 正解した問題数は${correctAnswerNumber}です。`
);
};
useEffect(() => {
createProblemHandler();
}, []);
return (
<View style={styles.container}>
<View style={styles.upperButtonContainer}>
<Button title="次の問題へ" onPress={createProblemHandler}></Button>
<Button title="終了" onPress={finishHandler}></Button>
</View>
<Text style={{ marginTop: 20, marginBottom: 30, fontSize: 20 }}>
{problemText}
</Text>
<View style={styles.lowerButtonContainer}>
<Button title="a" onPress={pressHandler_a}></Button>
<Button title="b" onPress={pressHandler_b}></Button>
<Button title="c" onPress={pressHandler_c}></Button>
<Button title="d" onPress={pressHandler_d}></Button>
</View>
<Text style={{ fontSize: 20, marginTop: 30 }}>{judgementText}</Text>
<Text style={{ fontSize: 20 }}>{explanationSentence}</Text>
<Text style={{ fontSize: 20 }}>{finishSentence}</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
upperButtonContainer: {
flexDirection: "row",
justifyContent: "space-around",
width: "80%",
},
lowerButtonContainer: {
flexDirection: "row",
justifyContent: "space-around",
width: "80%",
},
});
export const dataSetArray = [
{
id: 1,
correctAnswer: "a",
problem:
"コンパイラによる最適化の主な目的はどれか。 a. プログラムの実行時間を短縮する b. プログラムのデバッグを容易にする c. プログラムの保守性を改善する d. 目的プログラムを生成する時間を短縮する",
explanation:
"コンパイラは、高水準言語で書かれたソースプログラムを機械語にコンパイル（翻訳）し、プログラムを生成するソフトウェアです。コンパイルの手順は、１．字句解析、２．構文解析、３．意味解析、４．最適化、５．コード生成の順で行われる。このうち、４の最適化では、処理時間や使用するメモリ量が少なくなるようにプログラムを再編成します。",
},
{
id: 2,
correctAnswer: "a",
problem:
"WAFの説明はどれか a. Webアプリケーションへの攻撃を検知し、阻止する b. Webブラウザの通信内容を改ざんする攻撃をPC内で監視し、検出する c. サーバのOSへの不正なログインを監視する d. ファイルへのマルウェア感染を監視し、検出する",
explanation:
"",
},
{
id: 3,
correctAnswer: "a",
problem:
"業務への利用には、会社の情報システム部門の許可が本来は必要なのに、その許可を得ずに勝手に利用されるデバイスやクラウドサービス、ソフトウェアを指す用語は？ a. シャドーIT b. ソーシャルエンジニアリング c. ダークネット d. バックドア",
explanation:
"シャドーITとは、組織の公式な手続きを経ずに、業務に使用されているIT機器や情報システムのことです。",
},
];
また、問題の形式が、４択でもすこし違う問題もある。たとえば、『～についての下記の文章のうち、正しいものはどれか。１つ選べ。』 とか。
今度はそういう場合について考えてみる。
データセットのオブジェクトリテラルのプロパティにselectionを付け加え、
そこに、配列を設定する。trueの文章2つとfalseの文章4つを用意し、trueを１つ、falseを３つ選ぶようにすれば、上記のような問題になる。
selection: [{boolean:true, sentence:"～は・・・である"}, {boolean:false, sentence:"～～は***である"}]
