Хичээлээр хэрэглэгч сорилгын асуултын хариугаар сонгосон хувилбарын шалгалтын логикийн боловсруулалтыг хийе. Шалгалтыг Quiz компонентийн onAnswerClickHandler аргад

  const onAnswerClickHandler = (answerId) => {
    console.log("Хариултын Id:", answerId);
    if (quiz[activeQuestion].rightAnswerId === answerId) {
      const timeout = window.setTimeout(() => {
        if (isQuizFinished()) {
          console.log("Finished");
        } else {
          setActiveQuestion(activeQuestion + 1)      
        }
        window.clearTimeout(timeout);
      }, 1000);
    } else {
      
    }        
  };

  const isQuizFinished = () => {
    return activeQuestion === quiz.length - 1
  }

гэж хэрэгжүүлье. Дэлгэц дээрх асуулт бол quiz массивийн activeQuestion индекстэй элемент бөгөөд rightAnswerId талбарт зөв хариултын дугаар байгаа. Энэ утгыг onAnswerClickHandler функцэд параметрээр ирсэн answerId /хэрэглэгч сонгосон хариултын id/ -тэй тэнцэж буйг шалгана.

Хэрэглэгч талын хуудасны боловсруулалтад javascript дэвшилтэд буюу реактив фреймворкуудыг ашиглах нь улам өргөн болж байгаа тул ойрын жилүүдэд энэ чиглэлийн програм зохиогчдын эрэлт өндөр болох нь гарцаагүй. Иймээс програмчлалын мэрэгжлээр суралцаж байгаа болоод ажиллаж буй залуучууд Angular, React, Vue зэрэг фреймворкуудын ажиллагааг судлан суралцахыг зөвлөе. Фреймворкуудийн ажиллагаанууд өөр өөрийн онцлогтой хэдий ч ерөнхий зарчим бараг ижил тул аль нэгийг нь сурсан байхад бусдыг нь амархан сурна. VueJs -ийн бусдаасаа ялгарах онцлог гэвэл суурь пакет жижигхэн, суралцахад хөнгөнд оршино. Энэ нь фреймворкийн функционал муу гэсэн үг биш гэдгийг сануулъя.VueJs -ээр хамгийн өндөр шаардлага тавьдаг хэрэглэгчийн хэрэгцээг ч хангах програмыг төвөггүй боловсруулж чадна.

React бол динамик ажиллагаатай, нарийн төвөгтэй веб програмийг боловсруулах сайн технологи бөгөөд хичээлээр React -ийг яагаад судлах хэрэгтэй, технологийн үндсэн зарчмуудын талаар авч үзнэ. React -ийн албан ёсны сайтад хандвал түүнийг зохиогчид хэрэглэгчийн интерфейсийг үүсгэх Javascript сан хэмээн тодорхойлсон байгаа. Хэрэглэгчийн интерфейс гэдэг нь ямарч веб програмд хандахад таны хөтөч дээр нээгдэх дэлгэцүүдийг хэлж байгаа юм.

Хукууд ердийн функцууд тул бид ч өөрсдөө хукийг зохион ашиглах боломжтой. Үүнийг input элемент, түүнд оруулсан текстийг үзүүлэх h1 гарчиг бүхий дараах энгийн

import React, {useState} from 'react'

function App() {
  const [name, setName] = useState('')
  
  const changeHandler = event => {
    setName(event.target.value)  
  }
  
  return (
    <div className="container pt-3">
      <input type="text" value={name} onChange={changeHandler}/>
      <h1>{name}</h1>
    </div>      
  );
}

export default App;

жишээгээр харцгаая.