//////////////////////////////////////////////////////////// // 1. LOAD REACT & REACTDOM IF NOT ALREADY AVAILABLE //////////////////////////////////////////////////////////// if (typeof window.React === 'undefined') { const reactScript = document.createElement('script'); reactScript.src = 'https://unpkg.com/react@17/umd/react.development.js'; reactScript.crossOrigin = 'anonymous'; document.head.appendChild(reactScript); } if (typeof window.ReactDOM === 'undefined') { const reactDOMScript = document.createElement('script'); reactDOMScript.src = 'https://unpkg.com/react-dom@17/umd/react-dom.development.js'; reactDOMScript.crossOrigin = 'anonymous'; document.head.appendChild(reactDOMScript); } ////////////////////////////////////////////////////////////////// // 2. WAIT FOR REACT/REACTDOM, THEN BUILD & RENDER OUR COMPONENTS ////////////////////////////////////////////////////////////////// const waitForReact = setInterval(() => { if (typeof window.React !== 'undefined' && typeof window.ReactDOM !== 'undefined') { clearInterval(waitForReact); const { useState, createElement } = window.React; ////////////////////////////////////////// // SECTION A QUESTIONS (YORUBA) ////////////////////////////////////////// const sectionAQuestions = [ { name: 'qA1', text: '1. Iru abo (gender) wo ni o mó ara rẹ si?', type: 'gender', options: ['Male', 'Female', 'Others'], }, { name: 'qA2', text: '2. Gẹ́gẹ́ bí abo rẹ, ṣé o ti gba ifiranṣẹ, imeeli, tàbí ipe tí o kò fẹ́, tí ó sì tẹ̀ síwájú lórí intanẹẹti, kódà léhìn tí o ti sọ pé kí wón dákẹ́?', type: 'yn', }, { name: 'qA3', text: '3. Gẹ́gẹ́ bí abo rẹ, ṣé ẹnikan ti pin tàbí fi ẹ̀rú mú ọ pẹ̀lú fọ́tò tàbí fídíò ti ara rẹ?', type: 'yn', }, { name: 'qA4', text: '4. Gẹ́gẹ́ bí abo rẹ, ṣé ẹnikan ti fi alaye pàtàkì rẹ lórí intanẹẹti láìfọ́rọ̀ wé ọ?', type: 'yn', }, { name: 'qA5', text: '5. Gẹ́gẹ́ bí abo rẹ, ṣé wọ́n ti kó ọ sí ẹgbẹ́ kan tàbí fórum kan lórí intanẹẹti láti fi hú ọ tàbí fi ọ lérò?', type: 'yn', }, { name: 'qA6', text: '6. Gẹ́gẹ́ bí abo rẹ, ṣé ẹnikan ti dọ́gba wíwáyé irokeke fídí-mímu, ipani-nú, tàbí ìpomọra láti fi ọ lérò lórí intanẹẹti?', type: 'yn', }, { name: 'qA7', text: '7. Gẹ́gẹ́ bí abo rẹ, ṣé ẹnikan ti fọ̀to, fídíò, tàbí ifọrọwánilòrọ̀ rẹ gunpá tàbí yí pa dà láti tan kọrọ lórí rẹ?', type: 'yn', }, { name: 'qA8', text: '8. Gẹ́gẹ́ bí abo rẹ, ṣé o ti gba irokeke tàbí ifiyaje nítorí abo rẹ, ìdánimọ rẹ, tàbí ero rẹ (ìsìn, òṣèlú, àbúrò) lórí intanẹẹti?', type: 'yn', }, { name: 'qA9', text: '9. Gẹ́gẹ́ bí abo rẹ, ṣé o ti lérò àìlàbùkù tàbí àníyàn pẹ̀lú lílò àsà intanẹẹti nítorí wíwáyé àtúnṣe tàbí oríkalẹ̀?', type: 'yn', }, { name: 'qA10', text: '10. Gẹ́gẹ́ bí abo rẹ, ṣé ẹnikan ti da ara rẹ̀ rọ́pò lórí intanẹẹti, láti ba orúkọ rere rẹ jẹ tàbí fi ẹlòmíràn lógún?', type: 'yn', }, ]; ////////////////////////////////////////// // SECTION B QUESTIONS (YORUBA) ////////////////////////////////////////// const sectionBQuestions = [ { name: 'qB1', text: '1. Ṣé o ti ṣí nwúnwú tàbí fi obìnrin kan lẹ́yìn lórí intanẹẹti, nítorí ó fi ero rẹ hàn, jákè-jádò pé obìnrin ni?', }, { name: 'qB2', text: '2. Ṣé o ti pin tàbí tá fọ́tò tàbí fídíò àdọ̀dọ̀ obìnrin láìfọ́rọ̀ wé e?', }, { name: 'qB3', text: '3. Ṣé o ti kọ̀ wíwáyé tàbí yìn ìmúnibínu lórí ohun tí obìnrin kan fi sórí intanẹẹti?', }, { name: 'qB4', text: '4. Ṣé o ti gbàgbọ́ tàbí sọ pé obìnrin tó nbàjókòsí lórí intanẹẹti ló mú un wá sórí ara rẹ?', }, { name: 'qB5', text: '5. Ṣé o ti fi ifiranṣẹ ibálòpọ̀ tàbí fọ́tò, fídíò igbadun sáérè ranṣẹ sí ẹnikan látàrí intanẹẹti, lórí àìdọ̀gbà?', }, { name: 'qB6', text: '6. Ṣé o ti pín ìfọ̀rọ̀wánilòrọ̀ obìnrin kan, bíi nòmba fòònù tàbí ádírẹ́sì ilé rè, lórí intanẹẹti?', }, { name: 'qB7', text: '7. Ṣé o ti ré obìnrin kan lérò tàbí pèsè àfiwé láti hu ihuwasi ipinya lórí fọ́tò tàbí fídíò tó fi sórí intanẹẹti?', }, { name: 'qB8', text: '8. Ṣé o ti fi irokeke kan obìnrin lórí intanẹẹti (bí i piá, ibálòpọ̀ gbígbé, tàbí èyí to le ju bẹ́è lọ)?', }, { name: 'qB9', text: '9. Ṣé o ti yè obìnrin kan lulẹ̀ lórí intanẹẹti tó nbèrè sórí ipọ́ni to nà, pè é ní “òpin” tàbí wí pé “intanẹẹti lásán ni”?', }, { name: 'qB10', text: '10. Ṣé o ti sọ àlàyé àìtòótọ́ kan lórí obìnrin kan láti bà á lórúkọ?', }, ]; ////////////////////////////////////////// // SECTION C QUESTIONS (YORUBA) ////////////////////////////////////////// const sectionCQuestions = [ { name: 'qC1', text: '1. Ṣé o máa ń lò ọ̀kan péré lórí pápàsọdọ (password) kékèèké nínú àwọn àkàụ́ǹtì rẹ lórí intanẹẹti?', options: [ { value: 'a', label: 'a) Bẹ́ẹ̀ni, mi ò nígbà láti ranti pápàsọdọ púpọ̀' }, { value: 'b', label: 'b) Rárá, mo máa ń ko pápàsọdọ mi sílè fún àkàụ́ǹtì kálukú' }, { value: 'c', label: 'c) Rárá, mo lò ohun èlò password manager láti dábàá, tó sì ń ṣọ pápàsọdọ mi' }, ], correctAnswer: 'c', }, { name: 'qC2', text: '2. Igba melo ni o máa ń yí pápàsọdọ rẹ padà?', options: [ { value: 'a', label: 'a) Nígbà tí ìràwọ̀ bá wu tàbí tí mo bá gbàgbé' }, { value: 'b', label: 'b) Pípẹ̀pẹ̀, mo máa ń rí i pé kí o rọrùn láti gbágun' }, { value: 'c', label: 'c) Bó bá yá ọ̀dún méjì, ni mo máa yí i padà' }, ], correctAnswer: 'b', }, { name: 'qC3', text: '3. Ṣé o fi àfihàn àdàkọ méjì (2FA) sílé nínú àkàụ́ǹtì rẹ?', options: [ { value: 'a', label: 'a) Rárá, ó dàbí ìtanù' }, { value: 'b', label: 'b) Kákákiri, nínú pẹpẹ àyányan mi lóhun' }, { value: 'c', label: 'c) Bẹ́ẹ̀ni, mo fi í sínú gbogbo pẹpẹ tó bá wà' }, ], correctAnswer: 'c', }, { name: 'qC4', text: '4. Bí o bá gba DM láti ọ̀dọ̀ ẹnikan tó wí pé òun lórí ilé-ifowopamọ́, tó ń beere BVN tàbí ọ̀rọ̀ pàtàkì rẹ, kí ló yẹ ki o se?', options: [ { value: 'a', label: 'a) Ma dènà (block) àkàụ́ǹtì náà, kí ń sì fi ẹdun hàn' }, { value: 'b', label: 'b) Fún ún lórí BVN mi lálàfíà, bóyá wọ́n ń fẹ́ ràn mí lọ́wọ́' }, { value: 'c', label: 'c) Rìn lọ, má dáhùn ifiranṣẹ náà' }, ], correctAnswer: 'a', }, { name: 'qC5', text: '5. Bawo ni ìfihàn àlàyé rẹ (nomba fòònù, ádírẹ́sì, DOB, wdg) lórí intanẹẹti?', options: [ { value: 'a', label: 'a) Ó lówó gidigidi, mo fẹ́ kó gba ọmọ-ẹhin púpọ̀' }, { value: 'b', label: 'b) Ó ò lówó rárá, mo pa á dánù lábídi' }, { value: 'c', label: 'c) Díẹ̀ ni mo fi hàn; mo fi dídéna ré ládíbà' }, ], correctAnswer: 'b', }, { name: 'qC6', text: '6. Ṣé o máa ń ṣàyẹ̀wò àkójọpọ̀ àbò nínú àkàụ́ǹtì rẹ lórí sashial midia?', options: [ { value: 'a', label: 'a) Rárá, mi ò rántí láti ṣàtúnṣe' }, { value: 'b', label: 'b) Nígbà míìràn, bó bá ti jẹ ìròyìn àtàtà ni' }, { value: 'c', label: 'c) Bẹ́ẹ̀ni, mo máa ń ri sí i, mo sì ń tún un se dèédé' }, ], correctAnswer: 'c', }, { name: 'qC7', text: '7. Kí nìdí rẹ bí o bá gba imeeli pé o ti wọ 500k Naira?', options: [ { value: 'a', label: 'a) Mọ́yọ, pè ará suya mi, klik lori líǹkì yẹn' }, { value: 'b', label: 'b) Ṣàyẹ̀wò imeeli tó gbẹ̀yìn, bó bá fura, fi ẹdun hàn' }, { value: 'c', label: 'c) Fẹ́ṣẹ̀ tán ranṣẹ sí ọ̀rẹ́, fámílì, pé kálòó kára kú' }, ], correctAnswer: 'b', }, { name: 'qC8', text: '8. Bawo ni o ṣe mọ pé wẹẹbsàhiti kan dáa ṣáájú kí o tó fi ètò kárà àníyàn tàbí kádi kórọ̀?', options: [ { value: 'a', label: 'a) Tí ó bá lẹwà, kò ní làímọ̀ ọdún' }, { value: 'b', label: 'b) Mo gbẹ̀kẹ́lé ẹni tó rán an sí mí' }, { value: 'c', label: 'c) Mo ṣàyẹ̀wò URL, SSL asàmúlò, àti iwádìí lórí intanẹẹti' }, ], correctAnswer: 'c', }, { name: 'qC9', text: '9. Ṣé o máa ń lò Wi-Fi tóbá wà fún gbangba (cafes, malls, airports) láìlò VPN?', options: [ { value: 'a', label: 'a) Bẹ́ẹ̀ni, Wi-Fi púpọ̀ àrìnàwá lágbara!' }, { value: 'b', label: 'b) Rárá, mo máa ń lò VPN tàbí yàgà láti lo Wi-Fi gbangba' }, { value: 'c', label: 'c) Abeg, kín ni VPN?' }, ], correctAnswer: 'b', }, { name: 'qC10', text: '10. Ṣé o máa ń ṣètúnṣe fónutologun rẹ àti app rẹ lérò lórí àkókò?', options: [ { value: 'a', label: 'a) Pẹ̀lú fónutologun 16Gig iPhone X mí?' }, { value: 'b', label: 'b) Nígbà tó bá fọ wù mí, tàbí tó bá fi fọ wá' }, { value: 'c', label: 'c) Bẹ́ẹ̀ni, mo máa ń sọra láti ṣètúnṣe nínú àkókò tó bá múnadoko' }, ], correctAnswer: 'c', }, ]; ////////////////////////////////////////// // STYLES (English, user doesn't see these) ////////////////////////////////////////// const containerStyle = { textAlign: 'left', maxWidth: '600px', margin: '20px auto', backgroundColor: '#f9f9f9', fontFamily: 'Helvetica, Arial, sans-serif', padding: '20px', borderRadius: '8px', border: '1px solid #ddd', }; const questionBlockStyle = { marginBottom: '15px', }; const labelStyle = { display: 'block', marginLeft: '20px', }; const navButtonStyle = { backgroundColor: '#00aaff', color: '#fff', border: 'none', padding: '10px 20px', borderRadius: '4px', cursor: 'pointer', marginRight: '10px', marginTop: '20px', }; const resultBaseStyle = { marginTop: '20px', padding: '15px', borderRadius: '5px', color: '#333', }; const errorStyle = { color: 'red', marginBottom: '10px', }; // Background color logic for results function getSectionAColor(hasYes) { return hasYes ? 'lightcoral' : 'lightblue'; } function getSectionBColor(percentage) { if (percentage === null) return 'transparent'; if (percentage === 0) return 'lightblue'; if (percentage <= 29) return 'lightgreen'; if (percentage <= 69) return 'lightyellow'; if (percentage <= 89) return 'lightsalmon'; return 'lightcoral'; } function getSectionCColor(percentage) { if (percentage === null) return 'transparent'; if (percentage >= 90) return 'lightblue'; if (percentage >= 70) return 'lightgreen'; if (percentage >= 50) return 'lightyellow'; if (percentage >= 30) return 'lightsalmon'; return 'lightcoral'; } ////////////////////////////////////////////////////////////////// // SURVEY A ////////////////////////////////////////////////////////////////// const SurveyA = () => { const [currentIndex, setCurrentIndex] = useState(0); const [answers, setAnswers] = useState({}); const [finished, setFinished] = useState(false); const [result, setResult] = useState(''); const [hasYes, setHasYes] = useState(false); const [error, setError] = useState(''); const currentQuestion = sectionAQuestions[currentIndex]; const handleAnswerChange = (value) => { setAnswers({ ...answers, [currentQuestion.name]: value, }); setError(''); }; const handleNext = () => { const userAnswer = answers[currentQuestion.name]; if (!userAnswer) { setError('Jọwọ, yan ojúkan kó tó dámọràn.'); return; } if (currentIndex < sectionAQuestions.length - 1) { setCurrentIndex(currentIndex + 1); } else { calculateSectionA(); setFinished(true); } }; const handlePrev = () => { if (currentIndex > 0) { setCurrentIndex(currentIndex - 1); setError(''); } }; const calculateSectionA = () => { let score = 0; sectionAQuestions.forEach((q) => { if (q.name === 'qA1') return; // skip gender question const userAnswer = answers[q.name]; if (userAnswer === 'yes') { score += 1; } }); setHasYes(score > 0); if (score > 0) { setResult( 'O ti ní iriri TFGBV. O kì í ṣofo, o tọ́ si àbò àti àtìlẹ́yìn.\n\n' + 'Ṣe àfọ̀mọ̀ wònyí:\n' + '- Ṣètọ̀jú àkàụ́ǹtì rẹ: yí pápàsọdọ rẹ padà, lò 2FA, tún àbò rẹ pẹ̀lú.\n' + '- Ṣe ìkọ̀kọ̀ ẹ̀rí: Yè wíwò fọ́tò (screenshots), ṣètọju àkókò, kọ ohun tí o rí.\n' + '- Fà á síwájú: Lò irinṣẹ̀ ìròyìn nínú pẹpẹ, tàbí fọ̀rọ̀ wé kuramng.org.\n' + '- Tọjú ara rẹ: Pín irú ẹ ràn wí pẹ̀lú ọ̀rẹ́ kan, tàbí kúrojáwé lèhìn tí a bá fẹ́.' ); } else { setResult( 'O kì í ní iriri TFGBV. Dáradára, ṣùgbọ́n àbò rẹ lórí intanẹẹti ṣì bẹ̀rẹ̀.\n\n' + '- Ṣètọ̀jú àyíká intanẹẹti rẹ: Mún pápàsọdọ rẹ lólà, lò 2FA, tún àbò rẹ pẹ̀lú.\n' + '- Máa mọ̀nà kí o sì pín fún ẹni méjì: Kọ̀wé lórí TFGBV, mọ bí a ti ǹ móye rè.\n' + '- Ṣayẹ̀wò àlàyé rẹ lórí intanẹẹti:\n' + ' • Ṣé o ṣòwò bóyá o kàn gbé onítàn? Ṣàyẹ̀wò Nlele Àbò Intanẹẹti.\n' + ' • Ṣé ó ṣèṣee kí o lè ń hu ihuwasi búburu? Wo Perpetrator-Meter.\n' + ' • Beere lóde: Bí o bá rí TFGBV, ṣàlàyé fọrabalẹ̀, pèsè kuramng.org fún iranlọwọ.' ); } }; if (finished) { return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Ipari Igbeyewo'), createElement( 'div', { style: { ...resultBaseStyle, backgroundColor: getSectionAColor(hasYes), }, }, createElement('p', { style: { whiteSpace: 'pre-line' } }, result) ) ); } return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Ṣé o ti ní iriri TFGBV? Jẹ́ kí a ṣawari!'), createElement('p', null, 'Ibéèrè ' + (currentIndex + 1) + ' nínú ' + sectionAQuestions.length), error && createElement('p', { style: errorStyle }, error), createElement( 'div', { style: questionBlockStyle }, createElement('label', null, currentQuestion.text), createElement('br'), currentQuestion.type === 'gender' ? currentQuestion.options.map(opt => createElement( 'label', { key: opt, style: labelStyle }, createElement('input', { type: 'radio', name: currentQuestion.name, value: opt.toLowerCase(), checked: answers[currentQuestion.name] === opt.toLowerCase(), onChange: () => handleAnswerChange(opt.toLowerCase()), }), ' ', opt ) ) : createElement( 'div', null, createElement( 'label', { style: { display: 'inline-block', marginRight: '10px', marginLeft: '20px' } }, createElement('input', { type: 'radio', name: currentQuestion.name, value: 'yes', checked: answers[currentQuestion.name] === 'yes', onChange: () => handleAnswerChange('yes'), }), ' Bẹ́ẹ̀ni' ), createElement( 'label', { style: { display: 'inline-block', marginLeft: '10px' } }, createElement('input', { type: 'radio', name: currentQuestion.name, value: 'no', checked: answers[currentQuestion.name] === 'no', onChange: () => handleAnswerChange('no'), }), ' Rárá' ) ) ), createElement( 'button', { style: navButtonStyle, onClick: handlePrev, disabled: currentIndex === 0, }, 'Padà' ), createElement( 'button', { style: navButtonStyle, onClick: handleNext }, currentIndex === sectionAQuestions.length - 1 ? 'Parí' : 'Tèsíwájú' ) ); }; ////////////////////////////////////////////////////////////////// // SURVEY B ////////////////////////////////////////////////////////////////// const SurveyB = () => { const [currentIndex, setCurrentIndex] = useState(0); const [answers, setAnswers] = useState({}); const [finished, setFinished] = useState(false); const [result, setResult] = useState(''); const [percentage, setPercentage] = useState(null); const [error, setError] = useState(''); const currentQuestion = sectionBQuestions[currentIndex]; const handleAnswerChange = (value) => { setAnswers({ ...answers, [currentQuestion.name]: value, }); setError(''); }; const handleNext = () => { const userAnswer = answers[currentQuestion.name]; if (!userAnswer) { setError('Jọwọ, yan ojúkan kó tó dámọràn.'); return; } if (currentIndex < sectionBQuestions.length - 1) { setCurrentIndex(currentIndex + 1); } else { calculateSectionB(); setFinished(true); } }; const handlePrev = () => { if (currentIndex > 0) { setCurrentIndex(currentIndex - 1); setError(''); } }; const calculateSectionB = () => { let score = 0; sectionBQuestions.forEach(q => { const userAnswer = answers[q.name]; if (userAnswer === 'yes') { score += 10; } }); setPercentage(score); let message = ''; if (score === 0) { message = '0% — Ó pẹ̀lú ìkàwé! O kójá àyànmọ! O bọ̀wọ̀ fún aráyé lórí intanẹẹti.'; } else if (score <= 10) { message = '1–10% — O ṣalè díẹ̀! Rántí láti yè omoluàbí, má sàkóbá èrò miran.'; } else if (score <= 29) { message = '11–29% — Bẹ̀rẹ̀ sí í ṣètọ́jú ara rẹ. Kan iṣẹ́ kan péré le dáa lára!' ; } else if (score <= 49) { message = '30–49% — O ti ń hùwà àṣiṣe tó le ń da ipalara. Yí ọ̀nà rẹ padà lódindin!'; } else if (score <= 69) { message = '50–69% — O ti ń da ipalara lórí intanẹẹti. Àmuni-lágbára ni! Fèso ara rẹ.'; } else if (score <= 89) { message = '70–89% — Ihuwasi rẹ làńgbára, tó léwu, tó le sì lòdì sí òfin. Dákẹ́ báyìí!'; } else { message = '90–100% — O ti ń hùwà àìyẹ̀, ipanilára lórí intanẹẹti. Dakẹ́ pátápátá.'; } setResult(message); }; if (finished) { return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Ipari Igbeyewo'), createElement( 'div', { style: { ...resultBaseStyle, backgroundColor: getSectionBColor(percentage), }, }, createElement('p', { style: { whiteSpace: 'pre-line' } }, result), percentage !== null && createElement('p', null, 'Ìgbelewọn TFGBV Gẹ́gẹ́ bí Oníbájọ: ' + percentage + '%') ) ); } return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Bí intanẹẹti ti ń gbà fídíò, ṣé o le yò fun ararẹ?'), createElement('p', null, 'Ibéèrè ' + (currentIndex + 1) + ' nínú ' + sectionBQuestions.length), error && createElement('p', { style: errorStyle }, error), createElement( 'div', { style: questionBlockStyle }, createElement('label', null, currentQuestion.text), createElement('br'), createElement( 'label', { style: { display: 'inline-block', marginRight: '10px', marginLeft: '20px' } }, createElement('input', { type: 'radio', name: currentQuestion.name, value: 'yes', checked: answers[currentQuestion.name] === 'yes', onChange: () => handleAnswerChange('yes'), }), ' Bẹ́ẹ̀ni' ), createElement( 'label', { style: { display: 'inline-block', marginLeft: '10px' } }, createElement('input', { type: 'radio', name: currentQuestion.name, value: 'no', checked: answers[currentQuestion.name] === 'no', onChange: () => handleAnswerChange('no'), }), ' Rárá' ) ), createElement( 'button', { style: navButtonStyle, onClick: handlePrev, disabled: currentIndex === 0, }, 'Padà' ), createElement( 'button', { style: navButtonStyle, onClick: handleNext }, currentIndex === sectionBQuestions.length - 1 ? 'Parí' : 'Tèsíwájú' ) ); }; ////////////////////////////////////////////////////////////////// // SURVEY C ////////////////////////////////////////////////////////////////// const SurveyC = () => { const [currentIndex, setCurrentIndex] = useState(0); const [answers, setAnswers] = useState({}); const [finished, setFinished] = useState(false); const [percentage, setPercentage] = useState(null); const [result, setResult] = useState(''); const [error, setError] = useState(''); const currentQuestion = sectionCQuestions[currentIndex]; const handleAnswerChange = (value) => { setAnswers({ ...answers, [currentQuestion.name]: value, }); setError(''); }; const handleNext = () => { const userAnswer = answers[currentQuestion.name]; if (!userAnswer) { setError('Jọwọ, yan ojúkan kó tó dámọràn.'); return; } if (currentIndex < sectionCQuestions.length - 1) { setCurrentIndex(currentIndex + 1); } else { calculateSectionC(); setFinished(true); } }; const handlePrev = () => { if (currentIndex > 0) { setCurrentIndex(currentIndex - 1); setError(''); } }; const calculateSectionC = () => { let score = 0; sectionCQuestions.forEach(q => { const userAnswer = answers[q.name]; if (userAnswer === q.correctAnswer) { score += 10; } }); setPercentage(score); let message = ''; if (score >= 90) { message = '90–100% (Gíga bẹẹni! O yẹ ká fi pack Caprisun fún ọ) 🏆\nO dára púpọ̀! O mọ ìfọ́kànsìn gbígbé.'; } else if (score >= 70) { message = '70–89% (O ṣiṣẹ́ dada, Ọkan Caprisun to kù) 🎯\nO wa dáa, ṣùgbọ́n máa túbọ̀ gbọ́n!'; } else if (score >= 50) { message = '50–69% (Wàhálà díẹ̀, o ṣì le tun se! Puff-puff yóó gbẹsan) 🚦\nO ti ń lọ, ṣùgbọ́n àlààyè ríshẹ̀ mo gbé.'; } else if (score >= 30) { message = '30–49% (Ó ƙègbé! Ṣé àwọn ẹlòmíràn ní orí méjì ni?) ⚠\nO dẹ̀ farahàn ewu, gbógun ti é ní kánkán.'; } else { message = '0–29% (O ti su! Fúlò wá, kó fi pápàsọdọ rẹ sórí intanẹẹti) ❌\nNgbara rẹ lábò dijítàlì kì í dáa! Kọ́ ẹ jọ, lópin!'; } setResult(message + '\n\nÌgbelewọn Àbò Intanẹẹti Rẹ: ' + score + '%.'); }; if (finished) { return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Ipari Igbeyewo'), createElement( 'div', { style: { ...resultBaseStyle, backgroundColor: getSectionCColor(percentage), }, }, createElement('p', { style: { whiteSpace: 'pre-line' } }, result) ) ); } return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Àyẹ̀wò Àbò Intanẹẹti: Ṣé o nbààyè tàbí o ń ṣàjà rírà?'), createElement('p', null, 'Ibéèrè ' + (currentIndex + 1) + ' nínú ' + sectionCQuestions.length), error && createElement('p', { style: errorStyle }, error), createElement( 'div', { style: questionBlockStyle }, createElement('label', null, currentQuestion.text), createElement('br'), currentQuestion.options.map(opt => createElement( 'label', { key: opt.value, style: labelStyle }, createElement('input', { type: 'radio', name: currentQuestion.name, value: opt.value, checked: answers[currentQuestion.name] === opt.value, onChange: () => handleAnswerChange(opt.value), }), ' ', opt.label ) ) ), createElement( 'button', { style: navButtonStyle, onClick: handlePrev, disabled: currentIndex === 0, }, 'Padà' ), createElement( 'button', { style: navButtonStyle, onClick: handleNext }, currentIndex === sectionCQuestions.length - 1 ? 'Parí' : 'Tèsíwájú' ) ); }; ////////////////////////////////////////////////////// // MAIN APP (YORUBA TEXT MENU) ////////////////////////////////////////////////////// const ThreeSurveysApp = () => { const [selectedSurvey, setSelectedSurvey] = useState(null); if (!selectedSurvey) { return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Éto Ìwádìí OníKọkàra'), createElement('p', null, 'Yàn ọ̀kan lára ìdánwò mẹ́ta yìí:'), createElement( 'button', { style: navButtonStyle, onClick: () => setSelectedSurvey('A') }, 'Ṣé o ti ní iriri TFGBV?' ), createElement( 'button', { style: navButtonStyle, onClick: () => setSelectedSurvey('B') }, 'Ṣé o ń hùwà TFGBV?' ), createElement( 'button', { style: navButtonStyle, onClick: () => setSelectedSurvey('C') }, 'Àyẹ̀wò Àbò Intanẹẹti' ) ); } let surveyComponent = null; if (selectedSurvey === 'A') surveyComponent = createElement(SurveyA); if (selectedSurvey === 'B') surveyComponent = createElement(SurveyB); if (selectedSurvey === 'C') surveyComponent = createElement(SurveyC); return createElement( 'div', null, surveyComponent, createElement( 'div', { style: { textAlign: 'center', margin: '20px' } }, createElement( 'button', { style: navButtonStyle, onClick: () => setSelectedSurvey(null) }, '← Pada sí Ìbẹ̀rẹ̀' ) ) ); }; ////////////////////////////////////////////////////// // 3. RENDER THE MAIN APP ////////////////////////////////////////////////////// window.ReactDOM.render( createElement(ThreeSurveysApp), document.querySelector('.page-viewer') ); } }, 500);