function MainComponent() { const [fileContent, setFileContent] = React.useState(null); const [quizData, setQuizData] = React.useState(null); const [score, setScore] = React.useState(null); const handleFileSelect = async (event)=>{ const file = event.target.files[0]; const content = await file.text(); setFileContent(content); processQuiz(content); }; const processQuiz = (content)=>{ const doc = nlp(content); const questions = []; doc.forEach((token)=>{ if ([ 'NOUN', 'PROPN', 'VERB', 'ADJ' ].includes(token.pos) && !token.is_stop) { const options = generateOptions(token, doc); questions.push({ token, options }); } }); setQuizData(questions); }; const generateOptions = (correctToken, doc, n_options = 3)=>{ const choices = new Set(); doc.forEach((token)=>{ if (token.is_alpha && token.text !== correctToken.text) { choices.add(token.text); } }); const options = Array.from(choices); const finalOptions = options.length > n_options ? [ correctToken.text, ...sampleArray(options, n_options) ].sort(()=>Math.random() - 0.5) : [ correctToken.text, ...options ].sort(()=>Math.random() - 0.5); return finalOptions; }; const sampleArray = (array, size)=>{ const shuffled = array.slice(0); for(let i = array.length; i; i--){ const j = Math.floor(Math.random() * i); [shuffled[i - 1], shuffled[j]] = [ shuffled[j], shuffled[i - 1] ]; } return shuffled.slice(0, size); }; const handleSubmit = ()=>{ let score = 0; quizData.forEach(({ token, selectedOption })=>{ if (selectedOption === token.text) { score += 1; } }); setScore(score / quizData.length * 100); }; return /*#__PURE__*/ React.createElement("div", { className: "bg-[#2E2E2E] min-h-screen flex flex-col items-center justify-center font-roboto text-[#FFFFFF] p-8", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl mb-12", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, "キーワードテキストアプリへようこそ！"), !fileContent && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "bg-[#4CAF50] text-[#FFFFFF] px-6 py-3 text-xl rounded cursor-pointer hover:bg-[#45A049]", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "始める", /*#__PURE__*/ React.createElement("input", { type: "file", className: "hidden", accept: ".docx", onChange: handleFileSelect, __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }))), fileContent && !quizData && /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-xl", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "ファイルの内容を処理中です..."), quizData && !score && /*#__PURE__*/ React.createElement("div", { className: "w-[90%] max-w-[800px] bg-[#f5f5f5] text-[#000] p-6 rounded", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[400px] overflow-y-scroll", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, quizData.map(({ token, options }, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "mb-6", __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, token.text), /*#__PURE__*/ React.createElement("select", { name: `question-${idx}`, className: "w-full p-2 text-lg", onChange: (e)=>quizData[idx].selectedOption = e.target.value, __source: { fileName: "", lineNumber: 83, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 84, columnNumber: 19 }, __self: this }, "選択してください"), options.map((option, i)=>/*#__PURE__*/ React.createElement("option", { key: i, value: option, __source: { fileName: "", lineNumber: 86, columnNumber: 21 }, __self: this }, option)))))), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4CAF50] text-[#FFFFFF] px-6 py-3 text-xl rounded hover:bg-[#45A049] mt-6", onClick: handleSubmit, __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "回答を提出する")), score !== null && /*#__PURE__*/ React.createElement("div", { className: "w-[90%] max-w-[800px] bg-[#f5f5f5] text-[#000] p-6 rounded mt-8", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, "あなたのスコアは ", score.toFixed(2), "/100 です！"), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-scroll h-[400px]", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, quizData.map(({ token, selectedOption }, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "mb-6", __source: { fileName: "", lineNumber: 102, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }, token.text), /*#__PURE__*/ React.createElement("p", { className: `text-lg p-2 ${selectedOption === token.text ? 'text-[#4CAF50]' : 'text-[#FF0000]'}`, __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, "あなたの回答: ", selectedOption), selectedOption !== token.text && /*#__PURE__*/ React.createElement("p", { className: "text-lg p-2 text-[#4CAF50]", __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }, "正解: ", token.text)))))); }