<html lang="mg">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zoto Bot</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #e5ddd5;
            height: 100%;
        }
        .chat-container {
            max-width: 600px;
            margin: 0 auto;
            height: 100%;
            display: flex;
            flex-direction: column;
            background-color: #fff;
        }
        .chat-header {
            background-color: #075e54;
            color: white;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            flex-shrink: 0; 
        }
        .chat-header img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white ;
  padding: 3px;
  object-fit: cover;
}

       
        .chat-header h2 {
            font-size: 1.1em;
        }
        .chat-header .status {
            font-size: 0.8em;
            opacity: 0.8;
        }
        #chatHistory {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAFpJREFUOI3NkbENACEMA+PQMBmLsP9WYQeYgILiggrp5HzCJ1sXYAk8dQVoyu1WYClayton2Ap7b0nEt9OcBTRjDAc0t6TkM9H+A+9/uYF5CkVegGCVRvD+f0BskqOuMJ2/a4AAAAAElFTkSuQmCC');
            background-repeat: repeat;
        }
        .message {
            max-width: 80%;
            margin: 8px 0;
            padding: 8px 12px;
            border-radius: 7.5px;
            position: relative;
            line-height: 1.4;
            font-size: 0.95em;
        }
        .question {
            background-color: #fff;
            margin-right: auto;
            border-top-left-radius: 0;
            box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
        }
        .user-response {
            background-color: #dcf8c6;
            margin-left: auto;
            border-top-right-radius: 0;
            box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
        }
        .feedback {
            background-color: #fff;
            margin-right: auto;
            border-top-left-radius: 0;
            box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
        }
        .timestamp {
            font-size: 0.7em;
            color: #666;
            float: right;
            margin-left: 10px;
            margin-top: 3px;
        }
        .chat-input-container {
            background-color: #f0f0f0;
            padding: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0; /* Empêche cet élément de se réduire */
        }
        #userAnswer {
            flex: 1;
            padding: 9px 12px;
            border: none;
            border-radius: 20px;
            background-color: white;
            font-size: 0.95em;
        }
        button {
            background-color: #075e54;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.9em;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        .message a {
    color: red; /* Couleur des liens */
    text-decoration: none; /* Pas de soulignement */
}

.message a:hover {
    text-decoration: underline; /* Soulignement au survol */
}
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">
<img src="Robot.png" alt="Icône de robot" class="chat-header img">
            <div>
                <h2>Zoto Bot (Prof Ankida Sonita)</h2>
                <div class="status">زوتو بوت (مدرس عقيدة أهل السنة والجماعة)</div>
            </div>
        </div>
        <div id="chatHistory"></div>
        <div class="chat-input-container">
            <input type="text" id="userAnswer" placeholder="Eto no manoratra ... اكتب هنا" autocomplete="off">
            <button onclick="checkAnswer()" id="submitButton" disabled>
                <i class="fas fa-paper-plane"></i>
            </button>
        </div>
    </div>

    <script>
        const questionsByLevel = {
            zazavao: [
                {
                    question: "Telo ireo fahalalana fototra izay tokony ho fantan'ny mpino silamo tsirairay avy, dia ny fahafantarany ny tompony sy ny fahafantarany ny mpaminaniny ary ny fahafantarany ny finoany.<br>Fanontaniana: Tanisao ireo fahalalana fototra ?",
                    answer: "Fahafantarana ny tompo sy ny mpaminany ary ny finoana", 
                    encouragements: ["Tohizo fa tsara"],
                    feedbackWrong: "Fahafantarana ny tompo sy ny mpaminany ary ny finoana"
                },
                {
                    question: "Voalohany: Fahafantarana an'i Allah; izany hoe: fahafantarana fa Izy no ilay nahary an'izao tontolo izao, ary tsy misy andriamanitra afa-tsy Izy, tsy mitaha amin'ny na iza na iza ny mahazanahary azy sy ireo anara-masiny ary ireo laza tsarany. <br>Fanontaniana: Fantatrao marina ve iza i Allah ?",
                    answer: "Eny",
                    encouragements: ["Allah dia ilay nahary an'izao tontolo izao, ilay tsy misy andriamanitra afa-tsy Izy, ilay tsy mitaha amin'ny na iza na iza."],
                    feedbackWrong: "Allah dia ilay nahary an'izao tontolo izao, ilay tsy misy andriamanitra afa-tsy Izy, ilay tsy mitaha amin'ny na iza na iza."
                },
                {
                    question: "Faharoa: Fahafantarana an'i Mohamady (S.A.W); izany hoe fahafantarana fa izy dia iraka nalefan'i Allah, ary izy no mpaminany farany, ary tsy maintsy amintsika ny manaraka ny sori-dalany. <br>Fanontaniana: Iza no mpaminany farany tonga taorian'i Mohamady ?",
                    answer: "Tsy misy",
                    encouragements: ["Marina tokoa ny valinteninao."],
                    feedbackWrong: "Tsy misy. Satria izy no mpaminany farany."
                },
                        {
                    question: "Fahatelo: Fahafantarana ny finoana silamo; ny atao hoe islamo dia fanoloran-tena ho an'i Allah amin'ny alalan'ny fanokanana Azy, sy fiambaniana eo anatrehany amin'ny alalan'ny fankatoavana Azy, ary fanalavirana ireo sampy sy ireo mpanompo sampy.<br>Fanontaniana: Inona no atao hoe islamo ?",
                    answer: "Islamo dia fanoloran-tena ho an'i Allah amin'ny alalan'ny fanokanana Azy, sy fiambaniana eo anatrehany amin'ny alalan'ny fankatoavana Azy, ary fanalavirana ireo sampy sy ireo mpanompo sampy.", 
                    encouragements: ["Tehaka ren-tany aman-danitra ho anao."],
                    feedbackWrong: "Islamo dia fanoloran-tena ho an'i Allah amin'ny alalan'ny fanokanana Azy, sy fiambaniana eo anatrehany amin'ny alalan'ny fankatoavana Azy, ary fanalavirana ireo sampy sy ireo mpanompo sampy."
                },
                {
                    question: "Mijoro amin'ny andry dimy ny finoana silamo, dia ny:<br>1. Fijoroana ho vavolom-belona fa tsy misy andriamanitra afa-tsy Allah ary i Mohamady dia irany.<br>2. Fanaovana Soalà (fanompoam-pivavahana)<br>3. Famoahana Zakà (ampahefapolo-karena omena ireo sahirana)<br>4. Fanaovana Ramadany<br>5. Fanaovana Hajy (fivahinianana masina mankany Makkah)<br>Fanontaniana: Inona no andry faharoan'ny finoana silamo ?",
                    answer: "Soalà",
                    encouragements: ["Marina tokoa izany."],
                    feedbackWrong: "Soalà"
                },
                {
                    question: "Ireo zavatra manala olona anatin'ny islamo:<br>1. Shirky (fanompoan-tsampy na koa fampitambarana an'i Allah amin'ny andriamani-tsy izy)<br>2. Fakana olona na zavatra ho mpanelanelana azy sy i Allah. <br>3. Tsy fanekena fa hoe ireo mpanompo sampy dia tsy mpino<br>4.  Fiheverana fa hoe tari-dalan'ny mpaminany dia tsy tsara fa ny an'ny ranona no tsara.<br>5.  Fankahalana ireo fampianarana nentin'ny Mpaminany (S.A.W)<br>6. Famazivaziana raharaham-pinoana<br> 7.  Mosavy (vôriky)<br>8.  Fanohanana ireo tsy mpino hanohitra ireo mpino silamo<br>9.  Fiheverana fa hoe azo atao ny miala amin'ny sori-dalan'ny Mpaminany (S.A.W).<br>10.  Tsy firaharahiana ireo adidy ara-pinoana (ohatra: finiavana ny tsy hanao soalà)<br>Fanontaniana: Manala anatin'ny islamo ve ny fitalahoana amin'ny razana?",
                    answer: "Eny",
                    encouragements: ["Marina tokoa izany."],
                    feedbackWrong: "Eny. Satria shirky izany."
                },
                  {
                    question: "Ny atao hoe «imany» (finoana, foi) dia fitokiana izay rehetra nolazain'i Allah sy ny mpaminaniny, sy fanekena ireo zavatra nodidiany sy ny fotom-pinoana nampianariny. <br>Fanontaniana: Inona no atao hoe imany ?",
                    answer: "Imany dia fitokiana izay rehetra nolazain'i Allah sy ny mpaminaniny, sy fanekena ireo zavatra novidiany sy ny fotom-pinoana nampianariny.",
                    encouragements: ["Tehaka ren-tany aman-danitra ho anao."],
                    feedbackWrong: "Imany dia fitokiana izay rehetra nolazain'i Allah sy ny mpaminaniny, sy fanekena ireo zavatra novidiany sy ny fotom-pinoana nampianariny."
                },
                          {
                    question: "Mijoro amin'ny andry enina ny imany, dia ny:<br>1. Finoana an'i Allah<br>2. Finoana ireo anjely<br>3. Finoana ireo boky masina<br>4. Finoana ireo mpaminany<br>5. Finoana ny andro farany<br>6. Finoana ny lahatra tsara sy ny lahatra ratsy<br>Fanontaniana: Mino ny andro farany ve ny mpino silamo ?",
                    answer: "Eny",
                    encouragements: ["Marina tokoa izany."],
                    feedbackWrong: "Eny. Mino ny andro farany ny mpino silamo."
                },
                   {
                    question: "Voalohany: Finoana an'i Allah; izany hoe finoana ny fisian'i Allah sy ny maha-Zanahary azy sy ireo anara-masiny ary ireo laza tsarany. <br>Fanontaniana: Inona no tiana holazaina amin'ny hoe mino an'i Allah.",
                    answer: "Finoana ny fisian'i Allah sy ny maha-Zanahary azy sy ireo anara-masiny ary ireo laza tsarany",
                    encouragements: ["Tehaka ren-tany aman-danitra ho anao"],
                    feedbackWrong: "Finoana ny fisian'i Allah sy ny maha-Zanahary azy sy ireo anara-masiny ary ireo laza tsarany"
                },
                  {
                    question: "Faharoa: Finoana ireo anjely; izany hoe finoana ny fisian'izy ireo sy ireo andraikitra nampisahanin'i Allah azy ireo. Misy amin'izy ireo mpitondra hafatra mankany amin'ireo mpaminany, dia i Jibrilo (Gabriela) izany. Misy amin'izy ireo mpiandraikitra ny orana sy ny fipariahany dia i Mikailo (Mikaela) izany. Misy amin'izy ireo mpitsoka anjomara dia i Israfilo (Rafaela) izany. Misy amin'izy ireo no mpaka fofon'aina dia i Malakolimaoty sy ireo tariny izany. <br>Fanontaniana: Anjely ve lahy sa vavy?",
                    answer: "Sady tsy lahy no tsy vavy",
                    encouragements: ["Marina ny valinteninao."],
                    feedbackWrong: "Ny anjely dia sady tsy lahy no tsy vavy."
                },
                  {
                    question: "Fahatelo: Finoana ireo boky masina; izany hoe finoana ireo boky izay nampidinin'i Allah tamin'ireo irany. Anisan'izany ny Taoraty izay nampidinina tamin'i Mosa (Mosesy), sy ny Evanjely izay nampidinina tamin'i Insa (Jesosy), sy Zabora izay nampidinina tamin'i Daodo (Davida), ary ny Korany izay nampidinina tamin'i Mohamady (S.A.W), izay avo voninahitra indrindra amin'ireo boky masina sy namarana azy ireo. Amin'ireo boky masina izay avy any an-danitra, dia ny Korany irery ihany no voaharo amin'ny fanovana.<br>Fanontaniana: Iza amin'ireo boky masina no avo voninahitra indrindra ?",
                    answer: "Korany",
                    encouragements: ["Marina ny valinteninao"],
                    feedbackWrong: "Korany"
                },
                   {
                    question: "Fahefatra: Finoana ireo iraka; izany hoe finoana fa nandefa iraka ho an'ny olombelona i Allah, ka ny nalefa farany tamin'izy ireo dia i Mohamady (S.A.W), ary izy no avo voninahitra indrindra amin'izy ireo. <br>Fanontaniana: Tia ireo irakan'i Allah ve ny mpino silamo.",
                    answer: "Eny",
                    encouragements: ["Marina ny valinteninao"],
                    feedbackWrong: "Eny. Ny mpino silamo dia tia ireo mpaminany ary mino azy rehetra."
                },
                 {
                    question: "Fahadimy: Finoana ny andro farany; izany hoe finoana ny andro fitsanganana amin’ny maty sy fitsarana ary fanomezam-balisoa.<br>Fanontaniana: Oviana ny andro farany ?",
                    answer: "Allah irery ihany no mahalala izany",
                    encouragements: ["Marina ny valinteninao"],
                    feedbackWrong: "Allah irery ihany no mahalala izany."
                },
                      {
                    question: "Fahenina: Finoana ny lahatra; izany hoe finoana fa Allah dia mahalala sy manoratra ny zavatra rehetra, ary ny zavatra rehetra dia mitranga araka ny sitrapony, ary Izy no namorona ny zavatra rehetra.<br>Fanontaniana: Inona no tiana holazaina amin'ny hoe finoana ny lahatra ?",
                    answer: "Izany hoe finoana fa Allah dia mahalala sy manoratra ny zavatra rehetra, ary ny zavatra rehetra dia mitranga araka ny sitrapony, ary Izy no namorona ny zavatra rehetra.",
                    encouragements: ["Tehaka ren-tany aman-danitra ho anao"],
                    feedbackWrong: "Izany hoe finoana fa Allah dia mahalala sy manoratra ny zavatra rehetra, ary ny zavatra rehetra dia mitranga araka ny sitrapony, ary Izy no namorona ny zavatra rehetra."
                }
            ],
            antonony: [
                {
                    question: "Ny «LA ILAHA ILLALLAH » dia midika hoe tsy misy andriamanitra afa-tsy Allah.<br>Fanontaniana: Inona no dikan'ny «LA ILAHA ILLALLAH» ?",
                    answer: "Tsy misy andriamanitra afa-tsy Allah.",
                    encouragements: ["Tohizo fa tsara."],
                    feedbackWrong: "Tsy misy andriamanitra afa-tsy Allah."
                },
                  {
                    question: "Ny « LA ILAHA ILLALLAH » dia mitaky fepetra fito, dia ny:<br>1. Fahaizana ny dikany<br>2. Tsy fananana fisalasalana momba ny fahamarinan'io teny io<br>3. Fanekena io teny io<br>4. Fiambaniana eo anatrehan'i Allah<br>5. Fahamarinana amin'ny finoana io teny io. (Izany hoe: tena mino marina io teny io fa tsy mody mino)<br>6. Ikhlasy (na fikasana madio lavitra fireharehana sy lavitra shirky)<br>7. Fitiavana Allah sy ny irany. <br>Fanontaniana: Inona no dikan'ny ikhlasy ?",
                    answer: "fikasana madio lavitra fireharehana sy lavitra shirky",
                    encouragements: ["Tohizo fa tsara"],
                    feedbackWrong: "fikasana madio lavitra fireharehana sy lavitra shirky"
                },
                   {
                    question: "Ireo zavatra takian'ny fijoroana ho vavolom-belona fa i Mohamady dia irakan'i Allah :<br>1. Fankatoavana ireo didin'ny Mpaminany (S.A.W)<br>2. Fitokiana ireo teniny<br>3. Fiatahana ireo zavatra norarainy<br>4. Tsy fanompoana an'i Allah raha tsy araka izay nandidiany azy.<br>Fanontaniana: Misy firy ireo zavatra takian'ny fijoroana ho vavolom-belona fa i Mohamady dia irakan'i Allah ?",
                    answer: "efatra",
                    encouragements: ["Tohizo fa tsara"],
                    feedbackWrong: "efatra"
                },
                {
                    question: "Ny atao hoe taohidy (na mônôteisma na fanompoana andriamani-tokana) dia fandraisana Allah ho tokana amin'ny maha-andriananahary Azy sy amin'ny maha-andriamanitra Azy ary amin'ny maha-Izy manana ireo anarana masina sy ireo laza tsara. <br>Fanontaniana: Inona no atao hoe taohidy ?",
                    answer: "Ny atao hoe taohidy dia fandraisana Allah ho tokana amin'ny maha-andriananahary Azy sy amin'ny maha-andriamanitra Azy ary amin'ny maha-Izy manana ireo anarana masina sy ireo laza tsara.",
                    encouragements: ["Tehaka ren-tany aman-danitra ho anao"],
                    feedbackWrong: "Ny atao hoe taohidy dia fandraisana Allah ho tokana amin'ny maha-andriananahary Azy sy amin'ny maha-andriamanitra Azy ary amin'ny maha-Izy manana ireo anarana masina sy ireo laza tsara."
                },
                    {
                    question: "Misokajy telo ny taohidy, dia ny:<br>1. Taohidy ara-maha-andriananahary Azy<br>2. Taohidy ara-maha-andriamanitra Azy<br>3. Taohidy ara-maha-Izy manana ireo anarana masina sy ireo laza tsara. <br>Fanontaniana: Misokajy firy ny taohidy ?",
                    answer: "telo",
                    encouragements: ["Tehaka ren-tany aman-danitra ho anao"],
                    feedbackWrong: "telo"
                },
                    {
                    question: "Sokajy voalohany: Taohidy ara-maha-andriananahary Azy; izany hoe fandraisana Allah ho tokana amin'ny maha-andriananahary Azy; na koa hoe finoana fa Allah irery ihany no mpahary sy mpitantana an'izao tontolo izao.<br>Fanontaniana: Inona no atao hoe taohidy ara-maha-andriananahary Azy ?",
                    answer: "Taohidy ara-maha-andriananahary Azy dia fandraisana Allah ho tokana amin'ny maha-andriananahary Azy ; izany hoe finoana fa Allah irery ihany no mpahary sy mpitantana an'izao tontolo izao.",
                    encouragements: ["Tehaka ren-tany aman-danitra ho anao"],
                    feedbackWrong: "Taohidy ara-maha-andriananahary Azy dia fandraisana Allah ho tokana amin'ny maha-andriananahary Azy ; izany hoe finoana fa Allah irery ihany no mpahary sy mpitantana an'izao tontolo izao."
                },
                 {
                    question: "Sokajy faharoa: Taohidy ara-maha-andriamanitra Azy; izany hoe fandraisana Allah ho tokana amin'ny maha-andriamanitra Azy; na koa hoe finoana fa Allah irery ihany no tompo mendrika ho tompoina; ireo sampy (toy ireo andriamanimbavy sy ireo andriamanindahy) dia andriamani-tsy izy ka tsy mendrika ho tompoina. <br>Fanontaniana: Inona no atao hoe taohidy ara-maha-andriamanitra Azy ?",
                    answer: "Taohidy ara-maha-andriamanitra Azy dia fandraisana Allah ho tokana amin'ny maha-andriamanitra Azy; izany hoe finoana fa Allah irery ihany no tompo mendrika ho tompoina.",
                    encouragements: ["Tehaka ren-tany aman-danitra ho anao"],
                    feedbackWrong: "Taohidy ara-maha-andriamanitra Azy dia fandraisana Allah ho tokana amin'ny maha-andriamanitra Azy; izany hoe finoana fa Allah irery ihany no tompo mendrika ho tompoina."
                },
                 {
                    question: "Sokajy fahatelo: Taohidy ara-maha-Izy manana ireo anarana masina sy ireo laza tsara; izany hoe fandraisana Allah ho tokana amin'ny maha-Izy manana ireo anarana masina sy ireo laza tsara; na koa hoe finoana fa Allah irery ihany no manana anarana tsara indrindra sy laza ambony indrindra. Ohatra amin'ireo anara-masiny: Ilay be Indrafo, Ilay Nahary, Ilay Tsitoha. Ary ohatra amin'ireo laza tsarany: be indrafo, mahefa ny zavatra rehetra, tompon'izao tontolo izao.<br>Fanontaniana: Inona no atao hoe taohidy ara-maha-Izy manana ireo anarana masina sy ireo laza tsara ?",
                    answer: "Taohidy ara-maha-Izy manana ireo anarana masina sy ireo laza tsara dia fandraisana Allah ho tokana amin'ny maha-Izy manana ireo anarana masina sy ireo laza tsara; izany hoe finoana fa Allah irery ihany no man