//////////////////////////////////////////////////////////// // 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 (IGBO) ////////////////////////////////////////// const sectionAQuestions = [ { name: 'qA1', text: '1. Kedu okike (gender) ka i na-ahu onwe gi?', type: 'gender', options: ['Male', 'Female', 'Others'], }, { name: 'qA2', text: '2. Dabere na okike gi, i nwelarị ozi, email, ma ọ bụ oku a na-achọghị n\'ịntanetị, ọbụnadị mgbe i gwara ha ka ha kwụsị?', type: 'yn', }, { name: 'qA3', text: '3. Dabere na okike gi, mmadụ esola kesaa ma ọ bụ gwakwa na ha ga-kesaa foto gị ma ọ bụ vidio onwe gị riekwa gị?', type: 'yn', }, { name: 'qA4', text: '4. Dabere na okike gi, mmadụ kesala ihe onwe gị n\'ịntanetị na-enweghị nkwenye gị?', type: 'yn', }, { name: 'qA5', text: '5. Dabere na okike gi, a tinyealarị gị n\'otu ìgwè mkparịta ụka maọbụ forọm n\'ịntanetị ebe a kpagburu gị?', type: 'yn', }, { name: 'qA6', text: '6. Dabere na okike gi, e meelarị itụ gị ụjọ na mmebi anụahụ, mmekọahụ, maọbụ mmegbu mmetụta n\'ịntanetị?', type: 'yn', }, { name: 'qA7', text: '7. Dabere na okike gi, mmadụ gbawanyelarị ma ọ bụ gbanwee mkparịta ụka, foto, maọbụ vidio iji gbasaa ozi ụgha banyere gị?', type: 'yn', }, { name: 'qA8', text: '8. Dabere na okike gi, e tiri gị ụjọ maọbụ yi gị n\'ihi okike gi maọbụ echiche gi (religious, political, wdg) n\'ịntanetị?', type: 'yn', }, { name: 'qA9', text: '9. Dabere na okike gi, i nwesịlarị nchekasị n\'iji mgbasa ozi-elektrọnik maọbụ ebe n\'ịntanetị n\'ihi mwakpo a na-elekwasị anya?', type: 'yn', }, { name: 'qA10', text: '10. Dabere na okike gi, mmadụ emelarị kpochapụ onwe ha dịka gị n\'ịntanetị iji merụọ aha ọma gị maọbụ dupe ndị ọzọ?', type: 'yn', }, ]; ////////////////////////////////////////// // SECTION B QUESTIONS (IGBO) ////////////////////////////////////////// const sectionBQuestions = [ { name: 'qB1', text: '1. I laalare nwanyi n\'ịntanetị maka ikwupụta echiche ya naanị n\'ihi na ọ bu nwanyi?', }, { name: 'qB2', text: '2. I kesalare, ziga maọbụ ree foto/vidio nzuzo nwanyi na-enweghị nkwenye ya?', }, { name: 'qB3', text: '3. I dere maọbụ hụla n\'anya okwu na-emerụ ahụ banyere ihe nwanyi dere?', }, { name: 'qB4', text: '4. I kwetalaworị na nwanyi natara iyi ọha n\'ịntanetị \"nwetara ya n\'onwe ha\"?', }, { name: 'qB5', text: '5. I zigalarị ozi igbu-mmetụta mmekọahụ, foto, maọbụ vidio na-enweghị arịrịọ?', }, { name: 'qB6', text: '6. I kesalare ihe nzuzo nwanyi dịka nọmba ekwentị maọbụ adreesị ụlọ n\'ịntanetị?', }, { name: 'qB7', text: '7. I kpagbularị maọbụ kwalitelarị inyọọ nwanyi n\'ịntanetị n\'ihi foto maọbụ vidio onwe ya o kesara?', }, { name: 'qB8', text: '8. I tularị nwanyi ụjọ n\'ịntanetị (dika mmebi anụahụ, mmegbu mmekọahụ, maọbụ ihe ka njọ)?', }, { name: 'qB9', text: '9. I nyagiderịrị maọbụ gbaghaarịrị nwanyi na-ekwu maka iyi ọha ya, na-akpọ ya \"onye mmegharị\" ma ọbọ na-asị \"ọ bu naanị ịntanetị\"?', }, { name: 'qB10', text: '10. I gbasalarị ozi ụgha banyere nwanyi iji merụọ aha ọma ya?', }, ]; ////////////////////////////////////////// // SECTION C QUESTIONS (IGBO) ////////////////////////////////////////// const sectionCQuestions = [ { name: 'qC1', text: '1. I na-eji otu okwuntunde n\'ụfọdụ akaụntụ dị iche iche n\'ịntanetị?', options: [ { value: 'a', label: 'a) Ee, enwebeghi m oge icheta okwuntunde dị ọtụtụ' }, { value: 'b', label: 'b) Mba, ana m ede okwuntunde m maka akaụntụ dị iche' }, { value: 'c', label: 'c) Mba, ana m eji password manager iji mepụta ma chekwa okwuntunde m' }, ], correctAnswer: 'c', }, { name: 'qC2', text: '2. Ole mgbe i na-agbanwe okwuntunde gi?', options: [ { value: 'a', label: 'a) Mgbe kpakpando dị n\'usoro maọbụ mgbe m chefuru ha' }, { value: 'b', label: 'b) Oge niile, ana m eleba anya na ha siri ike' }, { value: 'c', label: 'c) Oge ọ bụla afọ 2 na-agafe' }, ], correctAnswer: 'b', }, { name: 'qC3', text: '3. I na-etinye njirimara abụọ (2FA) n\'akaụntụ gi?', options: [ { value: 'a', label: 'a) Mba, ọ na-egbu mgbu' }, { value: 'b', label: 'b) Nanị na nyiwe mgbasa ozi dị m mma' }, { value: 'c', label: 'c) Ee, ana m etinye ya n\'ebe niile nke na-ahapụ ya' }, ], correctAnswer: 'c', }, { name: 'qC4', text: '4. Ọ bụrụ na inweta DM si n\'aka mmadụ na-ekwu na ọ na-ahụ maka banki, na-arịọ ozi onwe gị (dịka BVN), gịnị ka i ga-eme?', options: [ { value: 'a', label: 'a) M na-egbochi akaụntụ ahụ, ma kesaa mkpesa' }, { value: 'b', label: 'b) Nyefee ha BVN m ozugbo n\'ihi na ha pụrụ inyere aka' }, { value: 'c', label: 'c) M na-eleghara ozi ahụ anya' }, ], correctAnswer: 'a', }, { name: 'qC5', text: '5. Kedu ka ihe onwe gi si pụta ìhè n\'ịntanetị (dika nọmba ekwentị, adreesị, DOB)?', options: [ { value: 'a', label: 'a) Ọ na-apụta ìhè nke ukwuu, achọrọ m inweta ọtụtụ ndị na-esochi m' }, { value: 'b', label: 'b) Ọ naghị pụta ìhè, ana m edobe ozi m dị nzuzo' }, { value: 'c', label: 'c) O gosipụtara ntakịrị; ana m emechie ihe m kesara ọha' }, ], correctAnswer: 'b', }, { name: 'qC6', text: '6. I na-enyocha ntọala nzuzo n\'akaụntụ mgbasa ozi gi?', options: [ { value: 'a', label: 'a) Mba, m na-ahapụ ihe ahụ' }, { value: 'b', label: 'b) Oge ufodu, mgbe akụkọ ọjọọ na-aga n\'ihu' }, { value: 'c', label: 'c) Ee, ana m nyochaa ma melite ha oge niile' }, ], correctAnswer: 'c', }, { name: 'qC7', text: '7. Kedu ka i si eme ma inata email na-asị na inwetara ₦500,000?', options: [ { value: 'a', label: 'a) Kpọọ onye na-ere suya, mesịa pịa njikọ ahụ' }, { value: 'b', label: 'b) Lelee email onye zitere; ọ bụrụ na ọ na-ese iwe, kesaa mkpesa' }, { value: 'c', label: 'c) Ziga ya na enyi na ezinụlọ n\'ihi na anyị niile ga-azụta Benz' }, ], correctAnswer: 'b', }, { name: 'qC8', text: '8. Kedu ka i si amata ma webusaiti ahụ dị nchedo tupu itinye ozi nkeonwe (dika kaadị ugwo)?', options: [ { value: 'a', label: 'a) Ọ bụrụ na ọ mara mma, ọ doro anya na ọ dị nchedo' }, { value: 'b', label: 'b) Ana m atụkwasị onye zitere m obi' }, { value: 'c', label: 'c) Ana m ele URL, SSL asambodo, na nzaghachi mmadụ n\'ịntanetị' }, ], correctAnswer: 'c', }, { name: 'qC9', text: '9. I na-eji Wi-Fi ọha (dika Cafe, Mall, Eroport) na-enweghị VPN?', options: [ { value: 'a', label: 'a) Ee, Wi-Fi ọha mara mma mgbe niile!' }, { value: 'b', label: 'b) Mba, ana m eji VPN maọbụ zere Wi-Fi ọha' }, { value: 'c', label: 'c) Abeg wetin be VPN?' }, ], correctAnswer: 'b', }, { name: 'qC10', text: '10. I na-emelite ekwentị gi na ngwa ya oge niile?', options: [ { value: 'a', label: 'a) Na iPhone X 16Gig m?' }, { value: 'b', label: 'b) Nanị mgbe ekwentị m pịrị m aka' }, { value: 'c', label: 'c) Ee, ana m emelite ha ozugbo emelite dị' }, ], correctAnswer: 'c', }, ]; ////////////////////////////////////////// // STYLES ////////////////////////////////////////// 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', }; // Color logic for each result block background 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: ONE QUESTION AT A TIME ////////////////////////////////////////////////////////////////// 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('Biko, horo nhọrọ tupu i gaba.'); 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) => { // skip the gender question if (q.name === 'qA1') return; const userAnswer = answers[q.name]; if (userAnswer === 'yes') { score += 1; } }); setHasYes(score > 0); if (score > 0) { setResult( 'I nwetula TFGBV. I nweghi nani. I kwesiri nchebe na nkwado.\n\n' + 'Mee ihe ndia:\n' + '- Chebe akauntu gi: gbanwee okwuntunde, jiri 2FA, hazie ntọala nzuzo.\n' + '- Nọchikọọ Eziokwu: Were screenshots, chekwa timestamps, dekọọ ihe niile.\n' + '- Koro Ebe Enyemaka Di: Jiri ngwaọrụ ikwupụta n\'elu nyiwe maọbụ laputa mkpesa na kuramng.org.\n' + '- Lekọta onwe gi: Kwuo na mmadu i na-akwanyere ugwu, zute ezumike ma ọ bụrụ na ọ dị mkpa.' ); } else { setResult( 'I naghị enweta TFGBV. Nke a dị mma, ma ka na-achọ nchedo n\'ịntanetị.\n\n' + '- Chebe ūdọ ịntanetị gi: Gbasie okwuntunde, jiri 2FA, hazie ntọala nzuzo.\n' + '- Mara Ozi & kesaa: Mụta ihe banyere TFGBV, mata ihe mmalite ya, kesaa ozi.\n' + '- Nyochaa ụkwụ ịntanetị gi:\n' + ' • Ị chere na i na-eme ihe n\'usoro? Were Nlele Nchedo Ịntanetị.\n' + ' • Ị nwere ike inwe omume na-emerụ? Jụọ Perpetrator-Meter.\n' + ' • Kwupụta n\'oge: Hụọ TFGBV, gosi ndị natara ya ebe ha ga-enweta enyemaka (Kuramng.org).' ); } }; if (finished) { return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Nnwale Agwula'), createElement( 'div', { style: { ...resultBaseStyle, backgroundColor: getSectionAColor(hasYes), }, }, createElement('p', { style: { whiteSpace: 'pre-line' } }, result) ) ); } return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'I nwetula TFGBV? Ka anyi chọpụta!'), createElement('p', null, 'Ajụjụ ' + (currentIndex + 1) + ' n’ime ' + 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'), }), ' Ee' ), 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'), }), ' Mba' ) ) ), createElement( 'button', { style: navButtonStyle, onClick: handlePrev, disabled: currentIndex === 0, }, 'Laghachi' ), createElement( 'button', { style: navButtonStyle, onClick: handleNext }, currentIndex === sectionAQuestions.length - 1 ? 'Wuchaa' : 'Na-aga n’ihu' ) ); }; ////////////////////////////////////////////////////////////////// // SURVEY B: ONE QUESTION AT A TIME ////////////////////////////////////////////////////////////////// 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('Biko, horo nhọrọ tupu i gaba.'); 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% — I dika kpakpando! Akara zuru okè! I na-asọpụrụ mmadụ n\'ịntanetị.'; } else if (score <= 10) { message = '1–10% — I fọrọ obere! Tụọ uche n\'omume gị, ghara igafe ókè.'; } else if (score <= 29) { message = '11–29% — Gbalisie ike! Otu mpụta TFGBV nwere ike imebi ihe.'; } else if (score <= 49) { message = '30–49% — Ị mechara omume na-emerụ ahụ. Gbalịa imezi ozugbo!'; } else if (score <= 69) { message = '50–69% — I na-akpata mmebi n\'ịntanetị. I kwesị ịgbanwe ngwa ngwa!'; } else if (score <= 89) { message = '70–89% — Omume gị dị ize ndụ, na-emerụ ahụ, na ihe ize ndụ iwu. Gbanwee ugbu a!'; } else { message = '90–100% — Ị na-eme ihe ọjọọ ugboro ugboro. KWUSI EZUOKE.'; } setResult(message); }; if (finished) { return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Nnwale Agwula'), createElement( 'div', { style: { ...resultBaseStyle, backgroundColor: getSectionBColor(percentage), }, }, createElement('p', { style: { whiteSpace: 'pre-line' } }, result), percentage !== null && createElement('p', null, 'Nsonaazụ TFGBV Perpetration Gị: ' + percentage + '%') ) ); } return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Ọ bụrụ na ịntanetị na-edebe faịlụ, ị ga-enwe mpako?'), createElement('p', null, 'Ajụjụ ' + (currentIndex + 1) + ' n’ime ' + 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'), }), ' Ee' ), 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'), }), ' Mba' ) ), createElement( 'button', { style: navButtonStyle, onClick: handlePrev, disabled: currentIndex === 0, }, 'Laghachi' ), createElement( 'button', { style: navButtonStyle, onClick: handleNext }, currentIndex === sectionBQuestions.length - 1 ? 'Wuchaa' : 'Na-aga n’ihu' ) ); }; ////////////////////////////////////////////////////////////////// // SURVEY C: ONE QUESTION AT A TIME ////////////////////////////////////////////////////////////////// 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('Biko, horo nhọrọ tupu i gaba.'); 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% (Magburu onwe ya! I kwesiri karton Caprisun) 🏆\nO di mma! I na-echekwa onwe gi nke ukwuu.'; } else if (score >= 70) { message = '70–89% (I try! Otu Caprisun maka gi) 🎯\nI na-eme nke oma, mana gbalịsie ike!'; } else if (score >= 50) { message = '50–69% (Enwere ebe ọzọ iji melite! I ga-eriju na puff puff) 🚦\nI na-aga n\'ihu, mana ka nwere ize ndụ.'; } else if (score >= 30) { message = '30–49% (O jọgburu! Kedu ka ụmụ ibe gi si eme ya?) ⚠\nI na-emesighị ike. Malite imezi ozugbo!'; } else { message = '0–29% (Njọ! Kuku kwuo okwuntunde gi n\'ịntanetị) ❌\nNchedo dijitalụ gi nọ n\'ihe ize ndụ! Mụta na itinye aka ozugbo.'; } setResult(message + '\n\nNsonaazụ Nchedo Ịntanetị Gị: ' + score + '%.'); }; if (finished) { return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Nnwale Agwula'), createElement( 'div', { style: { ...resultBaseStyle, backgroundColor: getSectionCColor(percentage), }, }, createElement('p', { style: { whiteSpace: 'pre-line' } }, result) ) ); } return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Nlele Nchedo Ịntanetị: I na-enweta ndu ka i na-anwa ilanarị?'), createElement('p', null, 'Ajụjụ ' + (currentIndex + 1) + ' n’ime ' + 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, }, 'Laghachi' ), createElement( 'button', { style: navButtonStyle, onClick: handleNext }, currentIndex === sectionCQuestions.length - 1 ? 'Wuchaa' : 'Na-aga n’ihu' ) ); }; ////////////////////////////////////////////////////// // MAIN APP (IGBO TEXT MENU) ////////////////////////////////////////////////////// const ThreeSurveysApp = () => { const [selectedSurvey, setSelectedSurvey] = useState(null); if (!selectedSurvey) { return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Ngwa Nnwale Onwe Gi'), createElement('p', null, 'Họrọ otu n’ime ajụjụ atọ dị n’okpuru:'), createElement( 'button', { style: navButtonStyle, onClick: () => setSelectedSurvey('A') }, 'I nwetula TFGBV?' ), createElement( 'button', { style: navButtonStyle, onClick: () => setSelectedSurvey('B') }, 'I na-eme TFGBV?' ), createElement( 'button', { style: navButtonStyle, onClick: () => setSelectedSurvey('C') }, 'Nlele Nchedo Ịntanetị' ) ); } 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) }, '← Laghachi na Isi Menu' ) ) ); }; ////////////////////////////////////////////////////// // 3. RENDER THE MAIN APP ////////////////////////////////////////////////////// window.ReactDOM.render( createElement(ThreeSurveysApp), document.querySelector('.page-viewer') ); } }, 500);