さて、今日は、試験勉強からは少し離れてアプリ作成に戻ります。
どこまでやったか忘れたので下記からスタートです。
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Button, ScrollView } from "react-native";
import { useEffect, useState } from "react";
import { problemArrayData } from "./setData/dataSet_first.js";
export default function App() {
const [correctAnswer, setCorrectAnswer] = useState("");
const [problemText, setProblemText] = useState("");
const [totalAnswerNumber, setTotalAnswerNumber] = useState(0);
const [correctAnswerNumber, setCorrectAnswerNumber] = useState(0);
const [finishedText, setFinishedText] = useState("");
const [curiousNumber, setCuriousNumber] = useState(20);
const [problemNumber, setProblemNumber] = useState(0);
const [correctText, setCorrectText] = useState("");
const [explanationText, setExplanationText] = useState("");
const [explanationSentence, setExplanationSentence] = useState("");
const pressNextHandler = () => {
const randomNumber = Math.floor(Math.random() * 19);
setProblemNumber(randomNumber);
setCorrectAnswer(problemArrayData[randomNumber].correctAnswer);
setCorrectText("");
setExplanationText("");
setProblemText(problemArrayData[randomNumber].problemText);
setExplanationSentence(problemArrayData[randomNumber].explanationSentence);
setTotalAnswerNumber((prevState) => prevState + 1);
};
const pressFinishHandler = () => {
setFinishedText(
`Finished!\r\n解いた問題数は${totalAnswerNumber}\r\n正答数は${correctAnswerNumber}です。`
);
};
const pressHandler = (selectedText) => {
if (correctAnswer == selectedText) {
setCorrectText("Correct");
setExplanationText("");
setCorrectAnswerNumber((prevState) => prevState + 1);
setCuriousNumber((prevState) => prevState - 1);
} else {
setCorrectText("Incorrect!");
setExplanationText(
`正解は${correctAnswer}でした。\r\n${explanationSentence}`
);
setCuriousNumber((prevState) => prevState - 2);
}
};
const pressHandler_a = () => {
pressHandler("a");
};
const pressHandler_b = () => {
pressHandler("b");
};
const pressHandler_c = () => {
pressHandler("c");
};
const pressHandler_d = () => {
pressHandler("d");
};
useEffect(() => {
pressNextHandler();
}, );
return (
<ScrollView style={styles.container}>
<Text>好奇心ポイント：{curiousNumber}</Text>
<View style={styles.nextFinishButtonContainer}>
<Button
title="次の問題"
onPress={pressNextHandler}
disabled={curiousNumber < 1 ? true : false}
/>
<Button title="終了" onPress={pressFinishHandler} />
</View>
<Text style={{ fontSize: 20 }}>{problemText}</Text>
<View style={styles.selectButtonContainer}>
<Button title="a" onPress={pressHandler_a} />
<Button title="b" onPress={pressHandler_b} />
<Button title="c" onPress={pressHandler_c} />
<Button title="d" onPress={pressHandler_d} />
</View>
<Text style={{ fontSize: 20 }}>{correctText}</Text>
<Text style={{ fontSize: 20 }}>{explanationText}</Text>
<Text style={styles.finishedText}>{finishedText}</Text>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#00ff00",
},
nextFinishButtonContainer: {
flexDirection: "row",
justifyContent: "space-around",
width: "80%",
},
selectButtonContainer: {
flexDirection: "row",
justifyContent: "space-around",
width: "80%",
},
finishedText: {
marginTop: 30,
fontSize: 20,
},
});
注意点としては、ボタンのところの onPressに関数を渡すとき、それぞれのボタンに引数が異なる関数を渡すのではなく、それぞれのボタンに別の関数を渡さないとエラーが出ることがあるということでしょうか。
dataSet.jsとして、下記のようなオブジェクトの配列を作っておきます。
a、b、c、ｄのいずれかのボタンを押す仕様になってますので、現時点では、correctAnswerは、"a"、"b"、"c"、"d"のいずれかです。
[
・
・
・
{
id: 6,
correctAnswer: "b",
problemText:
"加減乗除を組み合わせた計算式の処理において，スタックを利用するのが適している処理はどれか。 \r\n a. 格納された計算の途中結果を，格納された順番に取り出す処理\r\n b. 計算の途中結果を格納し，別の計算を行った後で，その計算結果と途中結果との計算を行う処理\r\n c. 昇順に並べられた計算の途中結果のうち，中間にある途中結果だけ変更する処理\r\n d. リストの中間にある計算の途中結果に対して，新たな途中結果の挿入を行う処理",
explanationSentence:
"スタックは、後入先出し方式でデータを入出力するデータ構造で、データを追加するプッシュ命令(push)と最後に格納されたデータを取り出すポップ命令(pop)でデータ操作を行います。サブルーチン終了後の戻りアドレスや局所変数などを保持するのに使用されます。",
},
・
・
・
]
あとで気づいたのですが、correctAnswerがかぶってますね。
データセットの方にも、App.jsの中の、pressHandlerの中にもある。
はじめ問題なく動いていたのに途中からエラーが出始めました。
いやー、こんなことあるんですね。変えておきます。
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, Button, ScrollView } from "react-native";
import { useEffect, useState } from "react";
import { problemArrayData } from "./entity/ProblemEntity_third";
export default function App() {
const [correctAnswerText, setCorrectAnswerText] = useState("");
const [problemText, setProblemText] = useState("");
const [totalAnswerNumber, setTotalAnswerNumber] = useState(0);
const [correctAnswerNumber, setCorrectAnswerNumber] = useState(0);
const [finishedText, setFinishedText] = useState("");
const [curiousNumber, setCuriousNumber] = useState(20);
const [problemNumber, setProblemNumber] = useState(0);
const [correctText, setCorrectText] = useState("");
const [explanationText, setExplanationText] = useState("");
const [explanationSentence, setExplanationSentence] = useState("");
const pressNextHandler = () => {
const randomNumber = Math.floor(Math.random() * 19);
setProblemNumber(randomNumber);
setCorrectAnswerText(problemArrayData[randomNumber].correctAnswer);
setCorrectText("");
setExplanationText("");
setProblemText(problemArrayData[randomNumber].problemText);
setExplanationSentence(problemArrayData[randomNumber].explanationSentence);
setTotalAnswerNumber((prevState) => prevState + 1);
};
const pressFinishHandler = () => {
setFinishedText(
`Finished!\r\n解いた問題数は${totalAnswerNumber}\r\n正答数は${correctAnswerNumber}です。`
);
};
const pressHandler = (selectedText) => {
if (correctAnswerText == selectedText) {
setCorrectText("Correct");
setExplanationText("");
setCorrectAnswerNumber((prevState) => prevState + 1);
setCuriousNumber((prevState) => prevState - 1);
} else {
setCorrectText("Incorrect!");
setExplanationText(
`正解は${correctAnswerText}でした。\r\n${explanationSentence}`
);
setCuriousNumber((prevState) => prevState - 2);
}
};
const pressHandler_a = () => {
pressHandler("a");
};
const pressHandler_b = () => {
pressHandler("b");
};
const pressHandler_c = () => {
pressHandler("c");
};
const pressHandler_d = () => {
pressHandler("d");
};
useEffect(() => {
pressNextHandler();
}, );
return (
<ScrollView style={styles.container}>
<Text>好奇心ポイント：{curiousNumber}</Text>
<View style={styles.nextFinishButtonContainer}>
<Button
title="次の問題"
onPress={pressNextHandler}
disabled={curiousNumber < 1 ? true : false}
/>
<Button title="終了" onPress={pressFinishHandler} />
</View>
<Text style={{ fontSize: 20 }}>{problemText}</Text>
<View style={styles.selectButtonContainer}>
<Button title="a" onPress={pressHandler_a} />
<Button title="b" onPress={pressHandler_b} />
<Button title="c" onPress={pressHandler_c} />
<Button title="d" onPress={pressHandler_d} />
</View>
<Text style={{ fontSize: 20 }}>{correctText}</Text>
<Text style={{ fontSize: 20 }}>{explanationText}</Text>
<Text style={styles.finishedText}>{finishedText}</Text>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#00ff00",
},
nextFinishButtonContainer: {
flexDirection: "row",
justifyContent: "space-around",
width: "80%",
},
selectButtonContainer: {
flexDirection: "row",
justifyContent: "space-around",
width: "80%",
},
finishedText: {
marginTop: 30,
fontSize: 20,
},
});
