{\rtf1\ansi\ansicpg932\cocoartf2822
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 Menlo-Regular;}
{\colortbl;\red255\green255\blue255;\red70\green137\blue204;\red23\green24\blue24;\red140\green211\blue254;
\red202\green202\blue202;\red109\green109\blue109;\red194\green126\blue101;\red212\green212\blue212;\red113\green192\blue131;
\red167\green197\blue152;\red183\green111\blue247;\red109\green115\blue120;\red246\green124\blue48;\red54\green192\blue160;
}
{\*\expandedcolortbl;;\cssrgb\c33725\c61176\c83922;\cssrgb\c11765\c12157\c12549;\cssrgb\c61176\c86275\c99608;
\cssrgb\c83137\c83137\c83137;\cssrgb\c50196\c50196\c50196;\cssrgb\c80784\c56863\c47059;\cssrgb\c86275\c86275\c86275;\cssrgb\c50588\c78824\c58431;
\cssrgb\c70980\c80784\c65882;\cssrgb\c77255\c54118\c97647;\cssrgb\c50196\c52549\c54510;\cssrgb\c98039\c56471\c24314;\cssrgb\c23922\c78824\c69020;
}
\paperw11900\paperh16840\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\deftab720
\pard\pardeftab720\partightenfactor0

\f0\fs28 \cf2 \cb3 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 <!DOCTYPE\cf4 \strokec4  html\cf2 \strokec2 >\cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf6 \cb3 \strokec6 <\cf2 \strokec2 html\cf5 \strokec5  \cf4 \strokec4 lang\cf6 \strokec6 =\cf7 \strokec7 "ja"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 <\cf2 \strokec2 head\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf5 \cb3     \cf6 \strokec6 <\cf2 \strokec2 meta\cf5 \strokec5  \cf4 \strokec4 charset\cf6 \strokec6 =\cf7 \strokec7 "UTF-8"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 meta\cf5 \strokec5  \cf4 \strokec4 name\cf6 \strokec6 =\cf7 \strokec7 "viewport"\cf5 \strokec5  \cf4 \strokec4 content\cf6 \strokec6 =\cf7 \strokec7 "width=device-width, initial-scale=1.0"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 title\cf6 \strokec6 >\cf5 \strokec5 \uc0\u12431 \u12367 \u12431 \u12367 \u33521 \u21336 \u35486 \u12463 \u12452 \u12474 \cf6 \strokec6 </\cf2 \strokec2 title\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 script\cf5 \strokec5  \cf4 \strokec4 src\cf6 \strokec6 =\cf7 \strokec7 "https://cdn.tailwindcss.com"\cf6 \strokec6 ></\cf2 \strokec2 script\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 link\cf5 \strokec5  \cf4 \strokec4 href\cf6 \strokec6 =\cf7 \strokec7 "https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Noto+Sans+JP:wght@400;700&display=swap"\cf5 \strokec5  \cf4 \strokec4 rel\cf6 \strokec6 =\cf7 \strokec7 "stylesheet"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf2 \strokec2 style\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 body\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 font-family:\cf5 \strokec5  \cf9 \strokec9 'Noto Sans JP'\cf8 \strokec8 ,\cf5 \strokec5  \cf7 \strokec7 sans-serif\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 background:\cf5 \strokec5  \cf7 \strokec7 linear-gradient(\cf10 \strokec10 135deg\cf8 \strokec8 ,\cf5 \strokec5  #81D4FA\cf8 \strokec8 ,\cf5 \strokec5  #4FC3F7\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .font-pop\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 font-family:\cf5 \strokec5  \cf9 \strokec9 'Mochiy Pop One'\cf8 \strokec8 ,\cf5 \strokec5  \cf7 \strokec7 sans-serif\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .card\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 background-color:\cf5 \strokec5  \cf7 \strokec7 rgba(\cf10 \strokec10 255\cf8 \strokec8 ,\cf5 \strokec5  \cf10 \strokec10 255\cf8 \strokec8 ,\cf5 \strokec5  \cf10 \strokec10 255\cf8 \strokec8 ,\cf5 \strokec5  \cf10 \strokec10 0.9\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 backdrop-filter:\cf5 \strokec5  \cf7 \strokec7 blur(\cf10 \strokec10 10px\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 border:\cf5 \strokec5  \cf10 \strokec10 1px\cf5 \strokec5  \cf7 \strokec7 solid\cf5 \strokec5  \cf7 \strokec7 rgba(\cf10 \strokec10 255\cf8 \strokec8 ,\cf5 \strokec5  \cf10 \strokec10 255\cf8 \strokec8 ,\cf5 \strokec5  \cf10 \strokec10 255\cf8 \strokec8 ,\cf5 \strokec5  \cf10 \strokec10 0.2\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .btn-option\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 transition:\cf5 \strokec5  \cf7 \strokec7 all\cf5 \strokec5  \cf10 \strokec10 0.3s\cf5 \strokec5  \cf7 \strokec7 ease\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .btn-option:hover\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 transform:\cf5 \strokec5  \cf7 \strokec7 translateY(\cf10 \strokec10 -4px\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 box-shadow:\cf5 \strokec5  \cf10 \strokec10 0\cf5 \strokec5  \cf10 \strokec10 8px\cf5 \strokec5  \cf10 \strokec10 15px\cf5 \strokec5  \cf7 \strokec7 rgba(\cf10 \strokec10 0\cf8 \strokec8 ,\cf10 \strokec10 0\cf8 \strokec8 ,\cf10 \strokec10 0\cf8 \strokec8 ,\cf10 \strokec10 0.1\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .correct\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 animation:\cf5 \strokec5  \cf7 \strokec7 correct-animation\cf5 \strokec5  \cf10 \strokec10 0.5s\cf5 \strokec5  \cf7 \strokec7 ease\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 background-color:\cf5 \strokec5  #34D399 \cf11 \strokec11 !important\cf8 \strokec8 ;\cf5 \strokec5  \cf12 \strokec12 /* green-400 */\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 color:\cf5 \strokec5  \cf7 \strokec7 white\cf5 \strokec5  \cf11 \strokec11 !important\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 transform:\cf5 \strokec5  \cf7 \strokec7 scale(\cf10 \strokec10 1.05\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf2 \strokec2 .wrong\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 animation:\cf5 \strokec5  \cf7 \strokec7 wrong-animation\cf5 \strokec5  \cf10 \strokec10 0.5s\cf5 \strokec5  \cf7 \strokec7 ease\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 background-color:\cf5 \strokec5  #F87171 \cf11 \strokec11 !important\cf8 \strokec8 ;\cf5 \strokec5  \cf12 \strokec12 /* red-400 */\cf5 \cb1 \strokec5 \
\cb3             \cf4 \strokec4 color:\cf5 \strokec5  \cf7 \strokec7 white\cf5 \strokec5  \cf11 \strokec11 !important\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 @keyframes\cf5 \strokec5  \cf7 \strokec7 correct-animation\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf10 \strokec10 0%\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  \cf4 \strokec4 transform:\cf5 \strokec5  \cf7 \strokec7 scale(\cf10 \strokec10 1\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \strokec5  \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3             \cf10 \strokec10 50%\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  \cf4 \strokec4 transform:\cf5 \strokec5  \cf7 \strokec7 scale(\cf10 \strokec10 1.1\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \strokec5  \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3             \cf10 \strokec10 100%\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  \cf4 \strokec4 transform:\cf5 \strokec5  \cf7 \strokec7 scale(\cf10 \strokec10 1.05\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \strokec5  \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 @keyframes\cf5 \strokec5  \cf7 \strokec7 wrong-animation\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf10 \strokec10 0%\cf8 \strokec8 ,\cf5 \strokec5  \cf10 \strokec10 100%\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  \cf4 \strokec4 transform:\cf5 \strokec5  \cf7 \strokec7 translateX(\cf10 \strokec10 0\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \strokec5  \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3             \cf10 \strokec10 20%\cf8 \strokec8 ,\cf5 \strokec5  \cf10 \strokec10 60%\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  \cf4 \strokec4 transform:\cf5 \strokec5  \cf7 \strokec7 translateX(\cf10 \strokec10 -10px\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \strokec5  \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3             \cf10 \strokec10 40%\cf8 \strokec8 ,\cf5 \strokec5  \cf10 \strokec10 80%\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  \cf4 \strokec4 transform:\cf5 \strokec5  \cf7 \strokec7 translateX(\cf10 \strokec10 10px\cf7 \strokec7 )\cf8 \strokec8 ;\cf5 \strokec5  \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 style\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf6 \cb3 \strokec6 </\cf2 \strokec2 head\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 <\cf2 \strokec2 body\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "min-h-screen flex items-center justify-center p-4"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf5 \cb3     \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "game-container"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "w-full max-w-lg mx-auto"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "card rounded-2xl shadow-2xl p-6 md:p-8 text-center"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "start-screen"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 h1\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-3xl md:text-4xl font-pop text-sky-600 mb-2"\cf6 \strokec6 >\cf5 \strokec5 \uc0\u12431 \u12367 \u12431 \u12367 \u33521 \u21336 \u35486 \u12463 \u12452 \u12474 \cf6 \strokec6 </\cf2 \strokec2 h1\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-gray-600 mb-8"\cf6 \strokec6 >\cf5 \strokec5 \uc0\u23567 \u23398 5\u24180 \u29983 \u12316 \u20013 \u23398 1\u24180 \u29983 \u12524 \u12505 \u12523 \cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 img\cf5 \strokec5  \cf4 \strokec4 src\cf6 \strokec6 =\cf7 \strokec7 "https://placehold.co/400x200/81D4FA/FFFFFF?text=Let's+Start!"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "rounded-lg mb-8 mx-auto"\cf5 \strokec5  \cf4 \strokec4 alt\cf6 \strokec6 =\cf7 \strokec7 "\uc0\u12473 \u12479 \u12540 \u12488 \u30011 \u20687 "\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 button\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "start-button"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "w-full bg-orange-400 hover:bg-orange-500 text-white font-bold text-xl py-4 rounded-xl shadow-lg transition-transform transform hover:scale-105"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \uc0\u12466 \u12540 \u12512 \u12473 \u12479 \u12540 \u12488 \u65281 \cb1 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 button\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3             \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "quiz-screen"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "hidden"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "flex justify-between items-center mb-4"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "score"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-lg font-bold text-green-600"\cf6 \strokec6 >\cf5 \strokec5 \uc0\u12473 \u12467 \u12450 : 0\cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "question-counter"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-lg font-bold text-gray-500"\cf6 \strokec6 >\cf5 \strokec5 1 / 10\cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "question-container"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "mb-8 p-6 bg-sky-100 rounded-xl"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-gray-600 text-lg mb-2"\cf6 \strokec6 >\cf5 \strokec5 \uc0\u12371 \u12398 \u26085 \u26412 \u35486 \u12398 \u24847 \u21619 \u12395 \u12354 \u12358 \u33521 \u21336 \u35486 \u12399 \u65311 \cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf6 \strokec6 <\cf2 \strokec2 h2\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "question-word"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-4xl md:text-5xl font-bold text-sky-800"\cf6 \strokec6 ></\cf2 \strokec2 h2\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "options-container"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "grid grid-cols-1 md:grid-cols-2 gap-4"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 <!-- \uc0\u36984 \u25246 \u32930 \u12508 \u12479 \u12531 \u12399 JS\u12391 \u29983 \u25104  -->\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "feedback-container"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "mt-6 text-2xl font-bold h-8"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \cf12 \strokec12 <!-- \uc0\u27491 \u35299 \u12539 \u19981 \u27491 \u35299 \u12398 \u12501 \u12451 \u12540 \u12489 \u12496 \u12483 \u12463  -->\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             \cf6 \strokec6 <\cf2 \strokec2 div\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "result-screen"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "hidden"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 h2\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-3xl font-pop text-sky-600 mb-4"\cf6 \strokec6 >\cf5 \strokec5 \uc0\u32080 \u26524 \u12399 \u12387 \u12404 \u12423 \u12358 \u65281 \cf6 \strokec6 </\cf2 \strokec2 h2\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 img\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "result-image"\cf5 \strokec5  \cf4 \strokec4 src\cf6 \strokec6 =\cf7 \strokec7 ""\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "rounded-lg mb-6 mx-auto w-48 h-48 object-cover"\cf5 \strokec5  \cf4 \strokec4 alt\cf6 \strokec6 =\cf7 \strokec7 "\uc0\u32080 \u26524 \u30011 \u20687 "\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-2xl font-bold mb-2"\cf6 \strokec6 >\cf5 \strokec5 \uc0\u12354 \u12394 \u12383 \u12398 \u12473 \u12467 \u12450 \u12399 ...\cf6 \strokec6 </\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "final-score"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-6xl font-bold text-orange-500 mb-6"\cf6 \strokec6 ></\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 p\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "result-message"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "text-lg text-gray-700 font-semibold mb-8"\cf6 \strokec6 ></\cf2 \strokec2 p\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf2 \strokec2 button\cf5 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf7 \strokec7 "restart-button"\cf5 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf7 \strokec7 "w-full bg-orange-400 hover:bg-orange-500 text-white font-bold text-xl py-4 rounded-xl shadow-lg transition-transform transform hover:scale-105"\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3                     \uc0\u12418 \u12358 \u19968 \u24230 \u12481 \u12515 \u12524 \u12531 \u12472 \u65281 \cb1 \
\cb3                 \cf6 \strokec6 </\cf2 \strokec2 button\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3         \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 div\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
\cb3     \cf6 \strokec6 <\cf2 \strokec2 script\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 // --- \uc0\u21336 \u35486 \u12522 \u12473 \u12488  ---\cf5 \cb1 \strokec5 \
\cb3         \cf12 \strokec12 // \uc0\u23567 \u23398 5\u24180 \u29983 \u12316 \u20013 \u23398 1\u24180 \u29983 \u12391 \u32722 \u12358 \u22522 \u26412 \u30340 \u12394 \u21336 \u35486 \cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  words \cf8 \strokec8 =\cf5 \strokec5  \cf8 \strokec8 [\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u12426 \u12435 \u12372 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'apple'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u26412 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'book'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u29483 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'cat'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u29356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'dog'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u21365 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'egg'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u21451 \u36948 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'friend'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u23478 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'house'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u29275 \u20083 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'milk'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u38899 \u27005 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'music'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u20844 \u22290 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'park'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u23398 \u26657 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'school'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u29983 \u24466 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'student'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u20808 \u29983 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'teacher'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u27700 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'water'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u22823 \u12365 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'big'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u23567 \u12373 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'small'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u33391 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'good'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u24746 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'bad'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u24184 \u12379 \u12394 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'happy'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u24754 \u12375 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'sad'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u26257 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'hot'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u23506 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'cold'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u26032 \u12375 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'new'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u21476 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'old'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u39135 \u12409 \u12427 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'eat'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u39154 \u12416 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'drink'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u34892 \u12367 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'go'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u26469 \u12427 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'come'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u25345 \u12388 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'have'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u22909 \u12365 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'like'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u20316 \u12427 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'make'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u36938 \u12406 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'play'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u35501 \u12416 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'read'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u35211 \u12427 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'see'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u35441 \u12377 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'speak'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u21193 \u24375 \u12377 \u12427 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'study'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u20351 \u12358 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'use'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u26360 \u12367 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'write'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u27497 \u12367 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'walk'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u36208 \u12427 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'run'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u12356 \u12388 \u12418 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'always'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u27770 \u12375 \u12390 \u65374 \u12394 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'never'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u12375 \u12400 \u12375 \u12400 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'often'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u26178 \u12293 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'sometimes'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u12383 \u12356 \u12390 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'usually'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u32654 \u12375 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'beautiful'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u38754 \u30333 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'interesting'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u38627 \u12375 \u12356 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'difficult'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u31777 \u21336 \u12394 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'easy'\cf5 \strokec5  \cf8 \strokec8 \},\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \strokec5  jp\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 '\uc0\u26377 \u21517 \u12394 '\cf8 \strokec8 ,\cf5 \strokec5  en\cf8 \strokec8 :\cf5 \strokec5  \cf9 \strokec9 'famous'\cf5 \strokec5  \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 ];\cf5 \cb1 \strokec5 \
\
\cb3         \cf12 \strokec12 // --- DOM\uc0\u35201 \u32032 \u12398 \u21462 \u24471  ---\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  startScreen \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'start-screen'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  quizScreen \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'quiz-screen'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  resultScreen \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'result-screen'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  startButton \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'start-button'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  restartButton \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'restart-button'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         \cb1 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  questionWord \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'question-word'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  optionsContainer \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'options-container'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  feedbackContainer \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'feedback-container'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  scoreDisplay \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'score'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  questionCounter \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'question-counter'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\
\cb3         \cf11 \strokec11 const\cf5 \strokec5  finalScore \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'final-score'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  resultMessage \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'result-message'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  resultImage \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 getElementById\cf8 \strokec8 (\cf9 \strokec9 'result-image'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         \cb1 \
\cb3         \cf12 \strokec12 // --- \uc0\u12466 \u12540 \u12512 \u12398 \u29366 \u24907 \u31649 \u29702  ---\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 let\cf5 \strokec5  currentQuestions \cf8 \strokec8 =\cf5 \strokec5  \cf8 \strokec8 [];\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 let\cf5 \strokec5  currentQuestionIndex \cf8 \strokec8 =\cf5 \strokec5  \cf13 \strokec13 0\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 let\cf5 \strokec5  score \cf8 \strokec8 =\cf5 \strokec5  \cf13 \strokec13 0\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 const\cf5 \strokec5  totalQuestions \cf8 \strokec8 =\cf5 \strokec5  \cf13 \strokec13 10\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\
\cb3         \cf12 \strokec12 // --- \uc0\u12452 \u12505 \u12531 \u12488 \u12522 \u12473 \u12490 \u12540  ---\cf5 \cb1 \strokec5 \
\cb3         startButton\cf8 \strokec8 .\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'click'\cf8 \strokec8 ,\cf5 \strokec5  startGame\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         restartButton\cf8 \strokec8 .\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'click'\cf8 \strokec8 ,\cf5 \strokec5  startGame\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\
\cb3         \cf12 \strokec12 // --- \uc0\u38306 \u25968  ---\cf5 \cb1 \strokec5 \
\
\cb3         \cf12 \strokec12 // \uc0\u12466 \u12540 \u12512 \u38283 \u22987 \u20966 \u29702 \cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 function\cf5 \strokec5  startGame\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf12 \strokec12 // \uc0\u29366 \u24907 \u12434 \u12522 \u12475 \u12483 \u12488 \cf5 \cb1 \strokec5 \
\cb3             score \cf8 \strokec8 =\cf5 \strokec5  \cf13 \strokec13 0\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             currentQuestionIndex \cf8 \strokec8 =\cf5 \strokec5  \cf13 \strokec13 0\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             \cf12 \strokec12 // \uc0\u21839 \u38988 \u12434 \u12521 \u12531 \u12480 \u12512 \u12395 \u36984 \u20986 \cf5 \cb1 \strokec5 \
\cb3             \cf11 \strokec11 const\cf5 \strokec5  shuffledWords \cf8 \strokec8 =\cf5 \strokec5  \cf8 \strokec8 [...\cf5 \strokec5 words\cf8 \strokec8 ].\cf5 \strokec5 sort\cf8 \strokec8 (()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf13 \strokec13 0.5\cf5 \strokec5  \cf8 \strokec8 -\cf5 \strokec5  \cf14 \strokec14 Math\cf8 \strokec8 .\cf5 \strokec5 random\cf8 \strokec8 ());\cf5 \cb1 \strokec5 \
\cb3             currentQuestions \cf8 \strokec8 =\cf5 \strokec5  shuffledWords\cf8 \strokec8 .\cf5 \strokec5 slice\cf8 \strokec8 (\cf13 \strokec13 0\cf8 \strokec8 ,\cf5 \strokec5  totalQuestions\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             \cf12 \strokec12 // \uc0\u30011 \u38754 \u20999 \u12426 \u26367 \u12360 \cf5 \cb1 \strokec5 \
\cb3             startScreen\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3             resultScreen\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3             quizScreen\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 remove\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             \cf12 \strokec12 // \uc0\u26368 \u21021 \u12398 \u21839 \u38988 \u12434 \u34920 \u31034 \cf5 \cb1 \strokec5 \
\cb3             displayQuestion\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\
\cb3         \cf12 \strokec12 // \uc0\u21839 \u38988 \u34920 \u31034 \u20966 \u29702 \cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 function\cf5 \strokec5  displayQuestion\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf12 \strokec12 // \uc0\u12501 \u12451 \u12540 \u12489 \u12496 \u12483 \u12463 \u12392 \u36984 \u25246 \u32930 \u12434 \u12463 \u12522 \u12450 \cf5 \cb1 \strokec5 \
\cb3             feedbackContainer\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             optionsContainer\cf8 \strokec8 .\cf5 \strokec5 innerHTML \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             \cf12 \strokec12 // \uc0\u12473 \u12467 \u12450 \u12392 \u21839 \u38988 \u30058 \u21495 \u12434 \u26356 \u26032 \cf5 \cb1 \strokec5 \
\cb3             scoreDisplay\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `\uc0\u12473 \u12467 \u12450 : \cf8 \strokec8 $\{\cf5 \strokec5 score\cf8 \strokec8 \}\cf9 \strokec9 `\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             questionCounter\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `\cf8 \strokec8 $\{\cf5 \strokec5 currentQuestionIndex \cf8 \strokec8 +\cf5 \strokec5  \cf13 \strokec13 1\cf8 \strokec8 \}\cf9 \strokec9  / \cf8 \strokec8 $\{\cf5 \strokec5 totalQuestions\cf8 \strokec8 \}\cf9 \strokec9 `\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\
\cb3             \cf12 \strokec12 // \uc0\u29694 \u22312 \u12398 \u21839 \u38988 \u12434 \u21462 \u24471 \cf5 \cb1 \strokec5 \
\cb3             \cf11 \strokec11 const\cf5 \strokec5  question \cf8 \strokec8 =\cf5 \strokec5  currentQuestions\cf8 \strokec8 [\cf5 \strokec5 currentQuestionIndex\cf8 \strokec8 ];\cf5 \cb1 \strokec5 \
\cb3             questionWord\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  question\cf8 \strokec8 .\cf5 \strokec5 jp\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\
\cb3             \cf12 \strokec12 // \uc0\u36984 \u25246 \u32930 \u12434 \u20316 \u25104 \cf5 \cb1 \strokec5 \
\cb3             \cf11 \strokec11 const\cf5 \strokec5  options \cf8 \strokec8 =\cf5 \strokec5  createOptions\cf8 \strokec8 (\cf5 \strokec5 question\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\
\cb3             \cf12 \strokec12 // \uc0\u36984 \u25246 \u32930 \u12508 \u12479 \u12531 \u12434 \u30011 \u38754 \u12395 \u34920 \u31034 \cf5 \cb1 \strokec5 \
\cb3             options\cf8 \strokec8 .\cf5 \strokec5 forEach\cf8 \strokec8 (\cf5 \strokec5 option \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf11 \strokec11 const\cf5 \strokec5  button \cf8 \strokec8 =\cf5 \strokec5  document\cf8 \strokec8 .\cf5 \strokec5 createElement\cf8 \strokec8 (\cf9 \strokec9 'button'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 button\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  option\cf8 \strokec8 .\cf5 \strokec5 en\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 button\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'btn-option'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 'w-full'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 'bg-white'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 'hover:bg-sky-200'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 'text-sky-700'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 'font-semibold'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 'py-4'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 'px-4'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 'rounded-xl'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 'shadow-md'\cf8 \strokec8 ,\cf5 \strokec5  \cf9 \strokec9 'text-lg'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 button\cf8 \strokec8 .\cf5 \strokec5 addEventListener\cf8 \strokec8 (\cf9 \strokec9 'click'\cf8 \strokec8 ,\cf5 \strokec5  \cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  checkAnswer\cf8 \strokec8 (\cf5 \strokec5 option\cf8 \strokec8 .\cf5 \strokec5 en \cf8 \strokec8 ===\cf5 \strokec5  question\cf8 \strokec8 .\cf5 \strokec5 en\cf8 \strokec8 ,\cf5 \strokec5  button\cf8 \strokec8 ));\cf5 \cb1 \strokec5 \
\cb3                 optionsContainer\cf8 \strokec8 .\cf5 \strokec5 appendChild\cf8 \strokec8 (\cf5 \strokec5 button\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\
\cb3         \cf12 \strokec12 // \uc0\u36984 \u25246 \u32930 \u12434 \u29983 \u25104 \u12377 \u12427 \u38306 \u25968 \cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 function\cf5 \strokec5  createOptions\cf8 \strokec8 (\cf5 \strokec5 correctAnswer\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf11 \strokec11 const\cf5 \strokec5  options \cf8 \strokec8 =\cf5 \strokec5  \cf8 \strokec8 [\cf5 \strokec5 correctAnswer\cf8 \strokec8 ];\cf5 \cb1 \strokec5 \
\cb3             \cf11 \strokec11 const\cf5 \strokec5  wrongAnswers \cf8 \strokec8 =\cf5 \strokec5  words\cf8 \strokec8 .\cf5 \strokec5 filter\cf8 \strokec8 (\cf5 \strokec5 word \cf8 \strokec8 =>\cf5 \strokec5  word\cf8 \strokec8 .\cf5 \strokec5 en \cf8 \strokec8 !==\cf5 \strokec5  correctAnswer\cf8 \strokec8 .\cf5 \strokec5 en\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             \cf12 \strokec12 // \uc0\u19981 \u27491 \u35299 \u12398 \u36984 \u25246 \u32930 \u12434 \u12521 \u12531 \u12480 \u12512 \u12395 3\u12388 \u36984 \u12406 \cf5 \cb1 \strokec5 \
\cb3             \cf11 \strokec11 while\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 options\cf8 \strokec8 .\cf5 \strokec5 length \cf8 \strokec8 <\cf5 \strokec5  \cf13 \strokec13 4\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 \cf11 \strokec11 const\cf5 \strokec5  randomWrongAnswer \cf8 \strokec8 =\cf5 \strokec5  wrongAnswers\cf8 \strokec8 [\cf14 \strokec14 Math\cf8 \strokec8 .\cf5 \strokec5 floor\cf8 \strokec8 (\cf14 \strokec14 Math\cf8 \strokec8 .\cf5 \strokec5 random\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 *\cf5 \strokec5  wrongAnswers\cf8 \strokec8 .\cf5 \strokec5 length\cf8 \strokec8 )];\cf5 \cb1 \strokec5 \
\cb3                 \cf11 \strokec11 if\cf5 \strokec5  \cf8 \strokec8 (!\cf5 \strokec5 options\cf8 \strokec8 .\cf5 \strokec5 some\cf8 \strokec8 (\cf5 \strokec5 opt \cf8 \strokec8 =>\cf5 \strokec5  opt\cf8 \strokec8 .\cf5 \strokec5 en \cf8 \strokec8 ===\cf5 \strokec5  randomWrongAnswer\cf8 \strokec8 .\cf5 \strokec5 en\cf8 \strokec8 ))\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     options\cf8 \strokec8 .\cf5 \strokec5 push\cf8 \strokec8 (\cf5 \strokec5 randomWrongAnswer\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             \cf12 \strokec12 // \uc0\u36984 \u25246 \u32930 \u12434 \u12471 \u12515 \u12483 \u12501 \u12523 \cf5 \cb1 \strokec5 \
\cb3             \cf11 \strokec11 return\cf5 \strokec5  options\cf8 \strokec8 .\cf5 \strokec5 sort\cf8 \strokec8 (()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf13 \strokec13 0.5\cf5 \strokec5  \cf8 \strokec8 -\cf5 \strokec5  \cf14 \strokec14 Math\cf8 \strokec8 .\cf5 \strokec5 random\cf8 \strokec8 ());\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\
\cb3         \cf12 \strokec12 // \uc0\u22238 \u31572 \u12434 \u12481 \u12455 \u12483 \u12463 \u12377 \u12427 \u38306 \u25968 \cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 function\cf5 \strokec5  checkAnswer\cf8 \strokec8 (\cf5 \strokec5 isCorrect\cf8 \strokec8 ,\cf5 \strokec5  clickedButton\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             \cf12 \strokec12 // \uc0\u12377 \u12409 \u12390 \u12398 \u12508 \u12479 \u12531 \u12434 \u28961 \u21177 \u21270 \cf5 \cb1 \strokec5 \
\cb3             \cf14 \strokec14 Array\cf8 \strokec8 .\cf11 \strokec11 from\cf8 \strokec8 (\cf5 \strokec5 optionsContainer\cf8 \strokec8 .\cf5 \strokec5 children\cf8 \strokec8 ).\cf5 \strokec5 forEach\cf8 \strokec8 (\cf5 \strokec5 btn \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 btn\cf8 \strokec8 .\cf5 \strokec5 disabled \cf8 \strokec8 =\cf5 \strokec5  \cf11 \strokec11 true\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 \cf12 \strokec12 // \uc0\u27491 \u35299 \u12398 \u12508 \u12479 \u12531 \u12434 \u12495 \u12452 \u12521 \u12452 \u12488 \cf5 \cb1 \strokec5 \
\cb3                 \cf11 \strokec11 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 currentQuestions\cf8 \strokec8 [\cf5 \strokec5 currentQuestionIndex\cf8 \strokec8 ].\cf5 \strokec5 en \cf8 \strokec8 ===\cf5 \strokec5  btn\cf8 \strokec8 .\cf5 \strokec5 textContent\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     btn\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'correct'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \});\cf5 \cb1 \strokec5 \
\
\cb3             \cf11 \strokec11 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 isCorrect\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 score \cf8 \strokec8 +=\cf5 \strokec5  \cf13 \strokec13 10\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 feedbackContainer\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 '\uc0\u27491 \u35299 \u65281 \u55356 \u57225 '\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 feedbackContainer\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'text-green-500'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 feedbackContainer\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 remove\cf8 \strokec8 (\cf9 \strokec9 'text-red-500'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \}\cf5 \strokec5  \cf11 \strokec11 else\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 clickedButton\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'wrong'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 feedbackContainer\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `\uc0\u27531 \u24565 ... \u27491 \u35299 \u12399  \cf8 \strokec8 $\{\cf5 \strokec5 currentQuestions\cf8 \strokec8 [\cf5 \strokec5 currentQuestionIndex\cf8 \strokec8 ].\cf5 \strokec5 en\cf8 \strokec8 \}\cf9 \strokec9  \uc0\u12391 \u12375 \u12383 `\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 feedbackContainer\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'text-red-500'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3                 feedbackContainer\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 remove\cf8 \strokec8 (\cf9 \strokec9 'text-green-500'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             \cf12 \strokec12 // 1.5\uc0\u31186 \u24460 \u12395 \u27425 \u12398 \u21839 \u38988 \u12408 \cf5 \cb1 \strokec5 \
\cb3             setTimeout\cf8 \strokec8 (()\cf5 \strokec5  \cf8 \strokec8 =>\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 currentQuestionIndex\cf8 \strokec8 ++;\cf5 \cb1 \strokec5 \
\cb3                 \cf11 \strokec11 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 currentQuestionIndex \cf8 \strokec8 <\cf5 \strokec5  totalQuestions\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     displayQuestion\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \}\cf5 \strokec5  \cf11 \strokec11 else\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                     showResult\cf8 \strokec8 ();\cf5 \cb1 \strokec5 \
\cb3                 \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \},\cf5 \strokec5  \cf13 \strokec13 1500\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\
\cb3         \cf12 \strokec12 // \uc0\u32080 \u26524 \u34920 \u31034 \u20966 \u29702 \cf5 \cb1 \strokec5 \
\cb3         \cf11 \strokec11 function\cf5 \strokec5  showResult\cf8 \strokec8 ()\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3             quizScreen\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 add\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\cb3             resultScreen\cf8 \strokec8 .\cf5 \strokec5 classList\cf8 \strokec8 .\cf5 \strokec5 remove\cf8 \strokec8 (\cf9 \strokec9 'hidden'\cf8 \strokec8 );\cf5 \cb1 \strokec5 \
\
\cb3             finalScore\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 `\cf8 \strokec8 $\{\cf5 \strokec5 score\cf8 \strokec8 \}\cf9 \strokec9 \uc0\u28857 `\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cb1 \
\cb3             \cf11 \strokec11 let\cf5 \strokec5  message \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf11 \strokec11 let\cf5 \strokec5  imageUrl \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 ''\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf11 \strokec11 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 score \cf8 \strokec8 ===\cf5 \strokec5  \cf13 \strokec13 100\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 message \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 '\uc0\u12497 \u12540 \u12501 \u12455 \u12463 \u12488 \u65281 \u21531 \u12399 \u33521 \u21336 \u35486 \u12510 \u12473 \u12479 \u12540 \u12384 \u65281 \u55356 \u57235 '\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 imageUrl \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'https://placehold.co/200x200/FFD700/FFFFFF?text=Perfect!'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \}\cf5 \strokec5  \cf11 \strokec11 else\cf5 \strokec5  \cf11 \strokec11 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 score \cf8 \strokec8 >=\cf5 \strokec5  \cf13 \strokec13 70\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 message \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 '\uc0\u32032 \u26228 \u12425 \u12375 \u12356 \u65281 \u12371 \u12398 \u35519 \u23376 \u12391 \u38929 \u24373 \u12429 \u12358 \u65281 \u55357 \u56960 '\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 imageUrl \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'https://placehold.co/200x200/4CAF50/FFFFFF?text=Great!'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \}\cf5 \strokec5  \cf11 \strokec11 else\cf5 \strokec5  \cf11 \strokec11 if\cf5 \strokec5  \cf8 \strokec8 (\cf5 \strokec5 score \cf8 \strokec8 >=\cf5 \strokec5  \cf13 \strokec13 40\cf8 \strokec8 )\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 message \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 '\uc0\u12424 \u12367 \u38929 \u24373 \u12387 \u12383 \u12397 \u65281 \u27425 \u12399 \u12418 \u12387 \u12392 \u39640 \u24471 \u28857 \u12434 \u30446 \u25351 \u12381 \u12358 \u65281 \u55357 \u56490 '\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 imageUrl \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'https://placehold.co/200x200/2196F3/FFFFFF?text=Good+Job!'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \}\cf5 \strokec5  \cf11 \strokec11 else\cf5 \strokec5  \cf8 \strokec8 \{\cf5 \cb1 \strokec5 \
\cb3                 message \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 '\uc0\u12362 \u30130 \u12428 \u27096 \u65281 \u20309 \u24230 \u12418 \u25361 \u25126 \u12375 \u12390 \u12289 \u21336 \u35486 \u12434 \u35226 \u12360 \u12424 \u12358 \u65281 \u55357 \u56534 '\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3                 imageUrl \cf8 \strokec8 =\cf5 \strokec5  \cf9 \strokec9 'https://placehold.co/200x200/F44336/FFFFFF?text=Try+Again!'\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3             resultMessage\cf8 \strokec8 .\cf5 \strokec5 textContent \cf8 \strokec8 =\cf5 \strokec5  message\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3             resultImage\cf8 \strokec8 .\cf5 \strokec5 src \cf8 \strokec8 =\cf5 \strokec5  imageUrl\cf8 \strokec8 ;\cf5 \cb1 \strokec5 \
\cb3         \cf8 \strokec8 \}\cf5 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 </\cf2 \strokec2 script\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf6 \cb3 \strokec6 </\cf2 \strokec2 body\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 </\cf2 \strokec2 html\cf6 \strokec6 >\cf5 \cb1 \strokec5 \
\
}