//////////////////////////////////////////////////////////// // 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 (HAUSA) ////////////////////////////////////////// const sectionAQuestions = [ { name: 'qA1', text: '1. Wane jinsi kake/kike danganta kanka/ki da shi?', type: 'gender', // We'll handle 3 options options: ['Namiji', 'Mace', 'Wasu'], }, { name: 'qA2', text: '2. Dangane da jinsinka, ko ka/kin taba karbar saƙonni, imel, ko kira da ba ka so, kuma har yanzu ana cigaba da aikawa duk da ka/kin ce a daina?', type: 'yn', }, { name: 'qA3', text: '3. Dangane da jinsinka, ko an taba raba hotuna ko bidiyoyinka na sirri, ko an ce za a raba su, ko an nemi cin zarafinka da su?', type: 'yn', }, { name: 'qA4', text: '4. Dangane da jinsinka, ko an taba fitar da bayananka na sirri a intanet ba tare da izininka ba?', type: 'yn', }, { name: 'qA5', text: '5. Dangane da jinsinka, ko an taba saka ka/ki a wata kungiya ko dandalin tattaunawa a intanet inda aka ci zarafinka?', type: 'yn', }, { name: 'qA6', text: '6. Dangane da jinsinka, ko an taba tsoratar da kai/ke da barazanar raunana ka/ki ta jiki, lalata, ko ɓata miki rai a intanet?', type: 'yn', }, { name: 'qA7', text: '7. Dangane da jinsinka, ko an taba gyara ko canza wani saƙo, hoto, ko bidiyo don yada ƙarya game da kai/ke?', type: 'yn', }, { name: 'qA8', text: '8. Dangane da jinsinka, ko an taba cin zarafinka ko tsoratar da kai/ke saboda jinsinka, asalinka, ko ra\'ayinka (na addini, siyasa ko makamantansu) a intanet?', type: 'yn', }, { name: 'qA9', text: '9. Dangane da jinsinka, ko ka/kin taba jin babu aminci ko tsoro wajen amfani da kafafen sada zumunta saboda hare-hare da aka kulla don kai/ke?', type: 'yn', }, { name: 'qA10', text: '10. Dangane da jinsinka, ko an taba yin suna da shaidarka a intanet, inda wani yake kwaikwayon kai/ke don ɓata sunanka ko yaudara wasu?', type: 'yn', }, ]; ////////////////////////////////////////// // SECTION B QUESTIONS (HAUSA) ////////////////////////////////////////// const sectionBQuestions = [ { name: 'qB1', text: '1. Ko kun taɓa zagin ko raina wata mace a intanet saboda kawai ta bayyana ra\'ayinta, don kuwa mace ce?', }, { name: 'qB2', text: '2. Ko kun taɓa rabawa, watsa ko sayar da hotuna ko bidiyon wani sirrin wata mace ba tare da izininta ba?', }, { name: 'qB3', text: '3. Ko kun taɓa yin ko son sharhi mai cin zarafi game da rubutun wata mace?', }, { name: 'qB4', text: '4. Ko kun taɓa yadda ko cewa matan da ake cin zarafinsu a intanet "suna janyo wa kansu" wannan cin zarafin?', }, { name: 'qB5', text: '5. Ko kun taɓa aika saƙonni, hotuna, ko bidiyo na batsa ga wani a intanet ba tare da sun nema ba?', }, { name: 'qB6', text: '6. Ko kun taɓa watsa bayanan sirrin wata mace, kamar lambar wayar salula ko adireshin gidanta, a intanet?', }, { name: 'qB7', text: '7. Ko kun taɓa cin zarafi ko ɗora wa mutane lokaci su kai farmaki kan wata mace a intanet saboda wani hoto ko bidiyo da ta raba?', }, { name: 'qB8', text: '8. Ko kun taɓa yin barazana ga wata mace a intanet (misali, da cutarwa ta jiki, lalata, ko wani abu mafi muni)?', }, { name: 'qB9', text: '9. Ko kun taɓa izgili ko rashin yarda da wata mace da take korafi game da cin zarafin da aka yi mata, kuna cewa "tana yin wasan kwaikwayo" ko "ai intanet ne kawai"?', }, { name: 'qB10', text: '10. Ko kun taɓa yada ƙarya game da wata mace don ɓata martabarta?', }, ]; ////////////////////////////////////////// // SECTION C QUESTIONS (HAUSA) ////////////////////////////////////////// const sectionCQuestions = [ { name: 'qC1', text: '1. Shin kuna amfani da kalmar sirri ɗaya ga duk asusunka na intanet?', options: [ { value: 'a', label: 'a) Eh, ban da lokaci don tuna kalmomi da yawa' }, { value: 'b', label: 'b) A\'a, Ina rubuta kalmomin sirri daban-daban ga kowanne asusu' }, { value: 'c', label: 'c) A\'a, Ina amfani da manajan kalmar sirri don ƙirƙira da ajiye kalmomina' }, ], correctAnswer: 'c', }, { name: 'qC2', text: '2. Sau nawa kuke canza kalmomin sirrinku?', options: [ { value: 'a', label: 'a) Idan lokaci ya yanke ko idan na manta su' }, { value: 'b', label: 'b) Akai-akai, ina tabbatar da cewa suna da ƙarfi' }, { value: 'c', label: 'c) Kowane shekara 2' }, ], correctAnswer: 'b', }, { name: 'qC3', text: '3. Shin kuna kunna tantancewa ta matakai biyu (2FA) a asusunku?', options: [ { value: 'a', label: 'a) A\'a, yana da wahala' }, { value: 'b', label: 'b) Sai dai a manyan kafafen sada zumunta da nake so' }, { value: 'c', label: 'c) I, ina kunnawa a duk dandali da ke bada wannan zaɓi' }, ], correctAnswer: 'c', }, { name: 'qC4', text: '4. Idan kun sami saƙon kai tsaye daga wani da yake cewa wakilin banki ne, yana neman bayananku (misali BVN), me kuke yi?', options: [ { value: 'a', label: 'a) Ina toshe asusun sannan in bada rahoto' }, { value: 'b', label: 'b) Ina aika musu da BVN ɗina nan da nan saboda suna iya kokarin taimakawa' }, { value: 'c', label: 'c) Ina watsi da saƙon' }, ], correctAnswer: 'a', }, { name: 'qC5', text: '5. Yaya bayyanar bayananku na sirri a kafafen sada zumunta (misali, lambar waya, adireshi, ranar haihuwa)?', options: [ { value: 'a', label: 'a) Suna bayyane sosai, ina buƙatar yawan mabiya' }, { value: 'b', label: 'b) Ba su bayyane, ina boye mahimman bayanaina' }, { value: 'c', label: 'c) Suna bayyane kaɗan; ina rage abin da nake nuna wa jama\'a' }, ], correctAnswer: 'b', }, { name: 'qC6', text: '6. Shin kuna duba saitunan tsaron bayananku na kafafen sada zumunta?', options: [ { value: 'a', label: 'a) A\'a, ban cika damu ba' }, { value: 'b', label: 'b) Wani lokaci, idan wani labari mara kyau ya yadu' }, { value: 'c', label: 'c) I, Ina duba da sabunta su akai-akai' }, ], correctAnswer: 'c', }, { name: 'qC7', text: '7. Yaya kuke mayar da martani ga wasikar imel da ke cewa kun ci ₦500,000?', options: [ { value: 'a', label: 'a) Ina kiran mai suya na, sannan in danna hanyar (link)' }, { value: 'b', label: 'b) Ina tantance adireshin imel ɗin, idan ban yarda da shi ba, ina bada rahoto' }, { value: 'c', label: 'c) Ina turawa abokai/iyalai domin duk mu sayi Benz' }, ], correctAnswer: 'b', }, { name: 'qC8', text: '8. Yaya kuke tabbatar da cewa shafin yanar gizon yana da aminci kafin saka bayanan sirri (misali bayanan katin kudi)?', options: [ { value: 'a', label: 'a) Idan shafin yayi kyau a gani, tabbas babu matsala' }, { value: 'b', label: 'b) Ina yarda da wanda ya turo min da shi' }, { value: 'c', label: 'c) Ina duba URL, takardun shaida na SSL, da sharhin mutane a intanet' }, ], correctAnswer: 'c', }, { name: 'qC9', text: '9. Shin kuna amfani da Wi-Fi na jama\'a (misali a cafe, shaguna, filin jirgin sama) ba tare da VPN ba?', options: [ { value: 'a', label: 'a) I, Wi-Fi na jama\'a fa riba ce!' }, { value: 'b', label: 'b) A\'a, koyaushe ina amfani da VPN ko guje wa Wi-Fi na jama\'a' }, { value: 'c', label: 'c) "Abeg" menene VPN?' }, ], correctAnswer: 'b', }, { name: 'qC10', text: '10. Shin kuna sabunta wayarku da manhajojinku akai-akai?', options: [ { value: 'a', label: 'a) Da iPhone X dina na 16Gig?' }, { value: 'b', label: 'b) Sai idan wayata ta tilasta min' }, { value: 'c', label: 'c) I, ina sabunta su da zaran an fitar da sabon nau\'i' }, ], correctAnswer: 'c', }, ]; ////////////////////////////////////////// // STYLES (unchanged) ////////////////////////////////////////// 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 functions for results backgrounds (unchanged) 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) - HAUSA TEXT ////////////////////////////////////////////////////////////////// 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(''); // Clear error once user picks an option }; const handleNext = () => { const userAnswer = answers[currentQuestion.name]; if (!userAnswer) { setError('Don Allah zaɓi amsa.'); return; } if (currentIndex < sectionAQuestions.length - 1) { setCurrentIndex(currentIndex + 1); } else { // We are on the last question, so finish calculateSectionA(); setFinished(true); } }; const handlePrev = () => { if (currentIndex > 0) { setCurrentIndex(currentIndex - 1); setError(''); } }; // Scoring logic remains the same const calculateSectionA = () => { let score = 0; sectionAQuestions.forEach((q) => { if (q.name === 'qA1') return; // ignore gender question for scoring const userAnswer = answers[q.name]; if (userAnswer === 'yes') { score += 1; } }); setHasYes(score > 0); if (score > 0) { setResult( 'Kun Fuskanci Cin Zarafi A Intanet Saboda Jinsi (TFGBV). Ba ku kaɗai ba ne. Kuna da cancantar tsaro da goyon baya.\n\n' + 'Ku ɗauki matakai kamar haka:\n' + '- Kare Asusu: Sabunta kalmomin sirri, kunna 2FA, da daidaita saitunan tsaro.\n' + '- Tattara Shaida: Yin hoton allo (screenshot) na saƙonni, adana lokutan aukuwa, da rubuta komai.\n' + '- Yi Rahoto: Amfani da kayan aikin dandali sannan ku rubuta rahoto a kuramng.org.\n' + '- Kula da Kanku: Ku gaya wa wanda kuke yarda da shi halin da kuke ciki, kuma ku ɗauki hutu idan akwai buƙata.' ); } else { setResult( 'Ba Ku Taba Fuskantar Cin Zarafi A Intanet Saboda Jinsi (TFGBV) Ba. Duk da haka, yana da muhimmanci ku ci gaba da kasancewa cikin tsaro a intanet. Ga wasu matakai:\n\n' + '- Kare Sararin Ku Na Intanet: Karfafa kalmomin sirri, kunna 2FA, da daidaita saitunan sirri.\n' + '- Ku kasance da sani & Rarraba Bayani: Koyi game da TFGBV, ku fahimci alamominsa, kuma ku yada bayanai.\n' + '- Kimanta Bayanan Ku a Intanet:\n' + ' • Shin ku matsakaicin mai amfani da intanet ne kawai? Gwada Online Safety Check.\n' + ' • Za ku iya yin abin cutarwa? Gwada Perpetrator-Meter.\n' + ' • Ku zama mai sa ido mai kyau: Ku magana idan kun ga TFGBV kuma ku nuna wa waɗanda suka fuskanci wannan cin zarafi hanyar zuwa Kuramng.org.' ); } }; if (finished) { return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'An Kammala Kimantawa'), createElement( 'div', { style: { ...resultBaseStyle, backgroundColor: getSectionAColor(hasYes), }, }, createElement('p', { style: { whiteSpace: 'pre-line' } }, result) ) ); } return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Shin Ko Ka/Kin Taba Fuskantar Cin Zarafi A Intanet Saboda Jinsi (TFGBV)? Bari Mu Gano!'), createElement('p', null, 'Tambaya ' + (currentIndex + 1) + ' daga cikin ' + 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'), }), ' Eh' ), 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'), }), ' A\'a' ) ) ), createElement( 'button', { style: navButtonStyle, onClick: handlePrev, disabled: currentIndex === 0, }, 'Baya' ), createElement( 'button', { style: navButtonStyle, onClick: handleNext }, currentIndex === sectionAQuestions.length - 1 ? 'Gama' : 'Gaba' ) ); }; ////////////////////////////////////////////////////////////////// // SURVEY B (ONE QUESTION AT A TIME) - HAUSA TEXT ////////////////////////////////////////////////////////////////// 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('Don Allah zaɓi amsa.'); 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; // Each "Yes" = 10% } }); setPercentage(score); let message = ''; if (score === 0) { message = '0% — Kun zama Zakara! Kamar babu wata matsala! Kuna mutunta mutane a intanet kuma kuna daraja tsaro.'; } else if (score <= 10) { message = '1–10% — Ba ku da yawa! Ku duba halayenku kuma ku tabbatar ba za ku sake ketare iyaka ba.'; } else if (score <= 29) { message = '11–29% — Gyara halinku! Ko da ɗaya daga cikin waɗannan ayyukan TFGBV zai iya haifar da mummunan illa.'; } else if (score <= 49) { message = '30–49% — Kun aikata munanan halaye da yawa. Ku nazarci kanku, ku daina yanzu.'; } else if (score <= 69) { message = '50–69% — Kuna ci gaba da cutar da mutane a intanet. Kuna buƙatar daina wannan halaye da gaggawa.'; } else if (score <= 89) { message = '70–89% — Ayyukanku suna da matuƙar haɗari, cutarwa, kuma wataƙila laifi ne. Ku canza yanzu!'; } else { message = '90–100% — Ku manyan masu cin zarafi ne a intanet. Daina nan take!'; } setResult(message); }; if (finished) { return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'An Kammala Kimantawa'), createElement( 'div', { style: { ...resultBaseStyle, backgroundColor: getSectionBColor(percentage), }, }, createElement('p', { style: { whiteSpace: 'pre-line' } }, result), percentage !== null && createElement('p', null, 'Sakamakon ku na yin TFGBV: ' + percentage + '%') ) ); } return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Idan Intanet Za Ta Adana Shaidar Ayyukanku, Za Ku Ji Dace da Gani?'), createElement('p', null, 'Tambaya ' + (currentIndex + 1) + ' daga cikin ' + 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'), }), ' Eh' ), 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'), }), ' A\'a' ) ), createElement( 'button', { style: navButtonStyle, onClick: handlePrev, disabled: currentIndex === 0, }, 'Baya' ), createElement( 'button', { style: navButtonStyle, onClick: handleNext }, currentIndex === sectionBQuestions.length - 1 ? 'Gama' : 'Gaba' ) ); }; ////////////////////////////////////////////////////////////////// // SURVEY C (ONE QUESTION AT A TIME) - HAUSA TEXT ////////////////////////////////////////////////////////////////// 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('Don Allah zaɓi amsa.'); 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; // each correct = 10 points sectionCQuestions.forEach((q) => { const userAnswer = answers[q.name]; if (userAnswer === q.correctAnswer) { score += 10; } }); setPercentage(score); let message = ''; if (score >= 90) { message = '90–100% (Madalla! Kun cancanci kwali ɗaya na Caprisun) 🏆\nAiki kyau! Kuna da cikakken kula da tsaron intanet.'; } else if (score >= 70) { message = '70–89% (Kuna kokari! Ga Caprisun ɗaya a gare ku) 🎯\nKuna yin kyau, amma ku ci gaba da ingantawa!'; } else if (score >= 50) { message = '50–69% (Damar ingantawa na nan! Ga alala mai zafi a nan) 🚦\nKuna hanyarku, amma har yanzu akwai wasu barazana.'; } else if (score >= 30) { message = '30–49% (Akasin jin daɗi! Shin abokanku suna da kawuna biyu ne?) ⚠\nKuna sawa kanku hadari. Ku ɗauki mataki nan da nan!'; } else { message = '0–29% (Babban takaici! Kamar dai kuna son sanya kalmar sirrinku a kafar sada zumunta) ❌\nTsaron ku na intanet yana cikin hatsari! Ku koyo ku kuma amfani matakan tsaro da gaggawa.'; } setResult(message + '\n\nMatsayin tsaron ku a intanet shine: ' + score + '%.'); }; if (finished) { return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'An Kammala Kimantawa'), createElement( 'div', { style: { ...resultBaseStyle, backgroundColor: getSectionCColor(percentage), }, }, createElement('p', { style: { whiteSpace: 'pre-line' } }, result) ) ); } return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Duban Tsaro A Intanet: Shin Kana Cigaba Ko Kuna Nan Kuna Jimre?'), createElement('p', null, 'Tambaya ' + (currentIndex + 1) + ' daga cikin ' + 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, }, 'Baya' ), createElement( 'button', { style: navButtonStyle, onClick: handleNext }, currentIndex === sectionCQuestions.length - 1 ? 'Gama' : 'Gaba' ) ); }; ////////////////////////////////////////////////////// // MAIN APP (HAUSA HEADINGS / BUTTONS) ////////////////////////////////////////////////////// const ThreeSurveysApp = () => { const [selectedSurvey, setSelectedSurvey] = useState(null); if (!selectedSurvey) { return createElement( 'div', { style: containerStyle }, createElement('h2', null, 'Kayan Gwagwarmaya Na Kimanta Kanku'), createElement('p', null, 'Zaɓi ɗaya daga cikin tambayoyin guda uku da ke ƙasa:'), createElement( 'button', { style: navButtonStyle, onClick: () => setSelectedSurvey('A') }, 'Ko Ka/Ka Taba Fuskantar TFGBV?' ), createElement( 'button', { style: navButtonStyle, onClick: () => setSelectedSurvey('B') }, 'Shin Kai/Ke Mai Yiwa Wasu TFGBV Ne?' ), createElement( 'button', { style: navButtonStyle, onClick: () => setSelectedSurvey('C') }, 'Duban Tsaro A Intanet' ) ); } 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) }, '← Komawa Babban Zaɓin' ) ) ); }; ////////////////////////////////////////////////////// // 3. RENDER THE MAIN APP ////////////////////////////////////////////////////// window.ReactDOM.render( createElement(ThreeSurveysApp), document.querySelector('.page-viewer') ); } }, 500);