-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Tried to mock backend with simple Promise simulation.
- Loading branch information
Showing
4 changed files
with
127 additions
and
50 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 78 additions & 32 deletions
110
lang_quiz_react/src/components/quiz_types/NounArticleQuiz.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,59 +1,105 @@ | ||
| import { useEffect } from 'react'; | ||
| import { useEffect, useState } from 'react'; | ||
| import styles from './NounArticleQuiz.module.css'; | ||
| import { getNounsSlice } from '../quiz_data/Nouns'; | ||
|
|
||
| let variants = ["der", "die", "das"]; // 3 base articles - fixed answer variants | ||
|
|
||
| // Fetch the information for setting up the quiz | ||
| function fetchUserData(userCredentials) { | ||
| // console.log("Logged in:", userCredentials); | ||
| let data = null; | ||
|
|
||
| if (userCredentials.user === "demo") { | ||
| data = { | ||
| noun: "Heimat", article: "die", | ||
| }; | ||
| } | ||
| return data; | ||
| } | ||
|
|
||
| // Shuffle array function from the https://javascript.info/task/shuffle (Fisher-Yates shuffle algorithm) | ||
| // This function is used for shuffle the 3 variants of articles | ||
| function shuffle(array) { | ||
| for (let i = array.length - 1; i > 0; i--) { | ||
| let j = Math.floor(Math.random() * (i + 1)); | ||
| [array[i], array[j]] = [array[j], array[i]]; | ||
| } | ||
| } | ||
|
|
||
| // Component function | ||
| // Component function for the preparing quiz question about the article of the noun | ||
| export default function NounArticleQuiz({userInfo}) { | ||
| let quizLength = 5; // number of words for fetching and asking during the quiz | ||
|
|
||
| let quizData = fetchUserData(userInfo); | ||
| const [quizGoing, setQuizState] = useState(true); | ||
| const [currentQuestion, setCurrentQuestion] = useState(null); | ||
| const [indexQuestion, setCurrentIndexQuestion] = useState(0); | ||
| const [fetchingData, setFetchingData] = useState(false); | ||
| const [quizNouns, setQuizNouns] = useState([]); | ||
| const [errorMessage, setErrorMessage] = useState(""); | ||
|
|
||
| useEffect(() => { | ||
| // Definition of the function for retrieving data from the simulated backend | ||
| async function retrieveData() { | ||
| setFetchingData(true); | ||
| console.log("Start Retrieving data..."); | ||
| try { | ||
| setQuizNouns(await getNounsSlice(quizLength, userInfo, [])); | ||
| } catch (error) { | ||
| setQuizNouns([]); setErrorMessage(String(error)); | ||
| } | ||
| setFetchingData(false); | ||
| console.log("Stop Retrieving data."); | ||
| } | ||
| retrieveData(); | ||
| }, [quizLength, userInfo]); | ||
|
|
||
| // below - set the first question | ||
| useEffect(() => { | ||
| if (quizNouns.length > 0) { | ||
| setCurrentQuestion(quizNouns[0]); setCurrentIndexQuestion((prevIndex) => prevIndex + 1); | ||
| }}, [quizNouns]); | ||
|
|
||
| useEffect(() => {shuffle(variants)}, [quizData.noun]); // shuffle the array if noun has been changed | ||
| useEffect(() => {shuffle(variants)}, [currentQuestion]); // shuffle the array if noun has been changed | ||
|
|
||
| // Handle click on the variant of an answer | ||
| function handleVariantSelection(e) { | ||
| if (e.target.innerText === quizData.article) { | ||
| if (e.target.innerText === currentQuestion.article) { | ||
| console.log("Right answer!"); | ||
| } else { | ||
| console.log("Wrong answer!"); | ||
| } | ||
| if (indexQuestion < quizLength) { | ||
| setCurrentQuestion(quizNouns[indexQuestion]); | ||
| setCurrentIndexQuestion((prevIndex) => prevIndex + 1); | ||
| } else { | ||
| setQuizState(false); | ||
| } | ||
| } | ||
|
|
||
| // JSX forming | ||
| if (quizData !== null) { | ||
| return ( | ||
| return( | ||
| <> | ||
| {quizGoing && fetchingData && <div> Waiting for data coming from the backend ... </div>} | ||
| {quizGoing && !fetchingData && currentQuestion !== null && ( | ||
| <div className={styles.quizBox}> | ||
| <div lang="de"> Select proper article for: <span className={styles.noun}>{quizData.noun}</span> </div> | ||
| <ul className={styles.variantsBox}> | ||
| {variants.map(variant => { | ||
| // Note that always the HTML tags should be always returned to be rendered and displayed | ||
| return (<li lang="de" key={variant} className={styles.variant} onClick={handleVariantSelection}>{variant}</li>); | ||
| })} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| } else { | ||
| return <div> User Not Found, cannot set up Quiz... </div> | ||
| } | ||
| <div lang="de"> Select proper article for: <span className={styles.noun}>{currentQuestion.noun}</span> </div> | ||
| <ul className={styles.variantsBox}> | ||
| {variants.map(variant => { | ||
| // Note that always the HTML tags should be always returned to be rendered and displayed | ||
| return (<li lang="de" key={variant} className={styles.variant} onClick={handleVariantSelection}>{variant}</li>); | ||
| })} | ||
| </ul> | ||
| </div> | ||
| )} | ||
| {!quizGoing && !fetchingData && currentQuestion === null && <div> Rejected with the message: {errorMessage} </div>} | ||
| {!quizGoing && <div> Quiz finished. </div>} | ||
| </> | ||
| ); | ||
|
|
||
| // if (quizGoing && !fetchingData && currentQuestion !== null) { | ||
| // return ( | ||
| // <div className={styles.quizBox}> | ||
| // <div lang="de"> Select proper article for: <span className={styles.noun}>{currentQuestion.noun}</span> </div> | ||
| // <ul className={styles.variantsBox}> | ||
| // {variants.map(variant => { | ||
| // // Note that always the HTML tags should be always returned to be rendered and displayed | ||
| // return (<li lang="de" key={variant} className={styles.variant} onClick={handleVariantSelection}>{variant}</li>); | ||
| // })} | ||
| // </ul> | ||
| // </div> | ||
| // ); | ||
| // } else if (quizGoing && fetchingData) { | ||
| // return <div> Waiting for data coming from the backend ... </div>; | ||
| // } else if (quizGoing && !fetchingData && currentQuestion === null) { | ||
| // return <div> Rejected with the message: {errorMessage} </div>; | ||
| // } else if (!quizGoing) { | ||
| // return <div> Quiz finished. </div>; | ||
| // } | ||
| } |
22 changes: 12 additions & 10 deletions
22
lang_quiz_react/src/components/quiz_types/QuizManager.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,16 @@ | ||
| import NounArticleQuiz from "./NounArticleQuiz"; | ||
|
|
||
| export default function QuizManager({ userInfo, quizType }) { | ||
| export default function QuizManager({ userInfo, quizState }) { | ||
|
|
||
| return ( | ||
| <div> | ||
| {quizType === "Article for Noun" ? ( | ||
| <NounArticleQuiz userInfo={userInfo}/> | ||
| ) : ( | ||
| <div> Flipping Cards Quiz Placeholder </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| if (quizState.started) { | ||
| return ( | ||
| <div> | ||
| {quizState.quizType === "Article for Noun" ? ( | ||
| <NounArticleQuiz userInfo={userInfo}/> | ||
| ) : ( | ||
| <div> Flipping Cards Quiz Placeholder </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } | ||
| } |