From aa6fba8a7afedabc2dce82d86410e3d5288a90e6 Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Sat, 11 Jan 2025 20:45:42 +0100
Subject: [PATCH 01/16] refactor: rename answerButton -> answerButtonText
---
components/buttons/{AnswerButton.tsx => AnswerButtonText.tsx} | 4 ++--
screens/PlayingQuiz/PlayingQuizBody.tsx | 4 ++--
2 files changed, 4 insertions(+), 4 deletions(-)
rename components/buttons/{AnswerButton.tsx => AnswerButtonText.tsx} (86%)
diff --git a/components/buttons/AnswerButton.tsx b/components/buttons/AnswerButtonText.tsx
similarity index 86%
rename from components/buttons/AnswerButton.tsx
rename to components/buttons/AnswerButtonText.tsx
index 2cc1fb6..6dbc8b4 100644
--- a/components/buttons/AnswerButton.tsx
+++ b/components/buttons/AnswerButtonText.tsx
@@ -11,13 +11,13 @@ interface Props{
}
/**
- * AnswerButton : Un bouton par défaut, il possède déjà un style mais on peut le surcharger grâce à la propriété buttonStyle
+ * AnswerButtonText : Un bouton par défaut, il possède déjà un style mais on peut le surcharger grâce à la propriété buttonStyle
* @param text - Texte du bouton
* @param handleButtonPressed - Fonction qui sera exécutée lorsque le bouton sera pressé
* @param buttonStyle - Surcharge du style du bouton
* @param buttonText - Surcharge du style du texte du bouton
*/
-export default function AnswerButton({text, handleButtonPressed, buttonStyle, buttonText, indicator}: Props){
+export default function AnswerButtonText({text, handleButtonPressed, buttonStyle, buttonText, indicator}: Props){
return(
<TouchableOpacity onPress={handleButtonPressed} style={[styles.defaultButton,buttonStyle]}>
{indicator !== undefined && (
diff --git a/screens/PlayingQuiz/PlayingQuizBody.tsx b/screens/PlayingQuiz/PlayingQuizBody.tsx
index 0992745..5a3fd66 100644
--- a/screens/PlayingQuiz/PlayingQuizBody.tsx
+++ b/screens/PlayingQuiz/PlayingQuizBody.tsx
@@ -9,7 +9,7 @@ import BlueButton from "../../components/buttons/BlueButton";
import {Question} from "../../models/Question";
import {Answer} from "../../models/Answer";
import {Quiz} from "../../models/Quiz";
-import AnswerButton from "../../components/buttons/AnswerButton";
+import AnswerButtonText from "../../components/buttons/AnswerButtonText";
import {QuizInformations} from "../../models/QuizInformations";
interface Props {
@@ -121,7 +121,7 @@ export default function PlayingQuizBody({ quizInformations, runId, actualQuestio
{actualQuestion ? (
<>
{actualQuestion.answers.map((answer, index) => (
- <AnswerButton
+ <AnswerButtonText
key={index}
text={answer.text}
handleButtonPressed={() => onAnsweredButtonClicked(answer.id)}
--
GitLab
From 70190d7af9b0562e628a878615d25948a3abc2fc Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Sat, 11 Jan 2025 20:58:24 +0100
Subject: [PATCH 02/16] feat: add answerButtonImage
---
components/buttons/AnswerButtonImage.tsx | 61 ++++++++++++++++++++++++
1 file changed, 61 insertions(+)
create mode 100644 components/buttons/AnswerButtonImage.tsx
diff --git a/components/buttons/AnswerButtonImage.tsx b/components/buttons/AnswerButtonImage.tsx
new file mode 100644
index 0000000..3aaca00
--- /dev/null
+++ b/components/buttons/AnswerButtonImage.tsx
@@ -0,0 +1,61 @@
+import {TouchableOpacity, Text, StyleSheet, View, Image} from "react-native";
+import {ButtonsStyles} from "../../styles/ButtonsStyles";
+import {TextsStyles} from "../../styles/TextsStyles";
+
+interface Props{
+ url: string;
+ handleButtonPressed:() => void;
+ buttonStyle?: any;
+ buttonText?: any;
+ indicator?: number | undefined;
+}
+
+/**
+ * AnswerButtonImage : Un bouton par défaut, il possède déjà un style mais on peut le surcharger grâce à la propriété buttonStyle
+ * @param url - Texte du bouton
+ * @param handleButtonPressed - Fonction qui sera exécutée lorsque le bouton sera pressé
+ * @param buttonStyle - Surcharge du style du bouton
+ * @param buttonText - Surcharge du style du texte du bouton
+ */
+export default function AnswerButtonImage({url, handleButtonPressed, buttonStyle, buttonText, indicator}: Props){
+ return(
+ <TouchableOpacity onPress={handleButtonPressed} style={[styles.defaultButton,buttonStyle]}>
+ {indicator !== undefined && (
+ <View style={styles.indicator}>
+ <Text style={styles.indicatorText}>{indicator}</Text>
+ </View>
+ )}
+ <Image
+ style={[TextsStyles.defaultButtonText, buttonText]}
+ source={{uri: url}}
+ />
+ </TouchableOpacity>
+ )
+}
+
+const styles = StyleSheet.create({
+ defaultButton: {
+ backgroundColor: "#45128C",
+ padding: 10,
+ alignItems: "center",
+ justifyContent: 'center',
+ borderRadius: 10,
+ },
+ indicator: {
+ position: "absolute",
+ top: "-16%",
+ left: "5%",
+ width: 25,
+ height: 25,
+ borderRadius: 15,
+ backgroundColor: "#D3D3D3",
+ justifyContent: "center",
+ alignItems: "center",
+ zIndex: 1,
+ },
+ indicatorText: {
+ color: "#000",
+ fontWeight: "bold",
+ fontSize: 14,
+ },
+})
\ No newline at end of file
--
GitLab
From 7f2622ff0b24cdde7c41a145ecd00a10c96b3b0d Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Sat, 11 Jan 2025 22:02:08 +0100
Subject: [PATCH 03/16] style: fix size header and body for playing quiz
---
templates/TemplateDuo.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/templates/TemplateDuo.tsx b/templates/TemplateDuo.tsx
index 97a225e..c347a2d 100644
--- a/templates/TemplateDuo.tsx
+++ b/templates/TemplateDuo.tsx
@@ -31,11 +31,11 @@ const styles = StyleSheet.create({
},
containerHeader: {
width: '100%',
- height: '26%',
+ height: '30%',
},
containerBody: {
width: '100%',
- height: '78%',
+ height: '70%',
backgroundColor: '#FFFFFF',
borderTopLeftRadius: 46,
borderTopRightRadius: 46
--
GitLab
From d80ca1986ab223772545f7d11f54b75403d18f71 Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Sat, 11 Jan 2025 22:50:06 +0100
Subject: [PATCH 04/16] styles: show images answerButtonImage
---
components/buttons/AnswerButtonImage.tsx | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/components/buttons/AnswerButtonImage.tsx b/components/buttons/AnswerButtonImage.tsx
index 3aaca00..bf75c90 100644
--- a/components/buttons/AnswerButtonImage.tsx
+++ b/components/buttons/AnswerButtonImage.tsx
@@ -6,7 +6,7 @@ interface Props{
url: string;
handleButtonPressed:() => void;
buttonStyle?: any;
- buttonText?: any;
+ buttonImage?: any;
indicator?: number | undefined;
}
@@ -17,7 +17,7 @@ interface Props{
* @param buttonStyle - Surcharge du style du bouton
* @param buttonText - Surcharge du style du texte du bouton
*/
-export default function AnswerButtonImage({url, handleButtonPressed, buttonStyle, buttonText, indicator}: Props){
+export default function AnswerButtonImage({url, handleButtonPressed, buttonStyle, buttonImage, indicator}: Props){
return(
<TouchableOpacity onPress={handleButtonPressed} style={[styles.defaultButton,buttonStyle]}>
{indicator !== undefined && (
@@ -26,7 +26,7 @@ export default function AnswerButtonImage({url, handleButtonPressed, buttonStyle
</View>
)}
<Image
- style={[TextsStyles.defaultButtonText, buttonText]}
+ style={[TextsStyles.defaultButtonText, {flex: 1, width: "100%", height: "100%"}, buttonImage]}
source={{uri: url}}
/>
</TouchableOpacity>
--
GitLab
From 52d677736ec14cc885ba21d014d03419c1999bd0 Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Sat, 11 Jan 2025 22:53:31 +0100
Subject: [PATCH 05/16] feat: add answer button image
---
screens/PlayingQuiz/PlayingQuizBody.tsx | 40 ++++++++++++++++++-------
styles/ButtonsStyles.ts | 2 +-
2 files changed, 31 insertions(+), 11 deletions(-)
diff --git a/screens/PlayingQuiz/PlayingQuizBody.tsx b/screens/PlayingQuiz/PlayingQuizBody.tsx
index 5a3fd66..7fe64e5 100644
--- a/screens/PlayingQuiz/PlayingQuizBody.tsx
+++ b/screens/PlayingQuiz/PlayingQuizBody.tsx
@@ -11,6 +11,7 @@ import {Answer} from "../../models/Answer";
import {Quiz} from "../../models/Quiz";
import AnswerButtonText from "../../components/buttons/AnswerButtonText";
import {QuizInformations} from "../../models/QuizInformations";
+import AnswerButtonImage from "../../components/buttons/AnswerButtonImage";
interface Props {
quizInformations: QuizInformations;
@@ -120,15 +121,26 @@ export default function PlayingQuizBody({ quizInformations, runId, actualQuestio
<View style={styles.buttonContainer}>
{actualQuestion ? (
<>
- {actualQuestion.answers.map((answer, index) => (
- <AnswerButtonText
- key={index}
- text={answer.text}
- handleButtonPressed={() => onAnsweredButtonClicked(answer.id)}
- buttonStyle={getStyleOfAnswerButton(answer.id, selectedAnswerId, correctAnswerId, quizState)}
- buttonText={getStyleOfAnswerButtonText(answer.id, selectedAnswerId, correctAnswerId, quizState)}
- />
- ))}
+ <View style={styles.buttonListContainer}>
+ {actualQuestion.answers.map((answer, index) => (
+ actualQuestion.type === "image" ?
+ <AnswerButtonImage
+ key={index}
+ url={answer.text}
+ handleButtonPressed={() => onAnsweredButtonClicked(answer.id)}
+ buttonStyle={getStyleOfAnswerButton(answer.id, selectedAnswerId, correctAnswerId, quizState)}
+ // buttonImage={getStyleOfAnswerButtonText(answer.id, selectedAnswerId, correctAnswerId, quizState)}
+ />
+ :
+ <AnswerButtonText
+ key={index}
+ text={answer.text}
+ handleButtonPressed={() => onAnsweredButtonClicked(answer.id)}
+ buttonStyle={getStyleOfAnswerButton(answer.id, selectedAnswerId, correctAnswerId, quizState)}
+ buttonText={getStyleOfAnswerButtonText(answer.id, selectedAnswerId, correctAnswerId, quizState)}
+ />
+ ))}
+ </View>
<View style={styles.playButtonContainer}>
<BlueButton onPress={() => quizState === QuizState.ANSWERING ? onValidation() : onContinue()} text={quizState === QuizState.ANSWERING ? "CONFIRM" : "CONTINUE"} buttonStyle={{borderRadius: 50}} isDisabled={false}/>
</View>
@@ -201,7 +213,7 @@ const styles = StyleSheet.create({
},
answerButton: {
backgroundColor: "#F3F3F3",
- height: '15%',
+ height: '30%',
alignItems: 'center',
width: '80%',
marginVertical: '3%',
@@ -212,5 +224,13 @@ const styles = StyleSheet.create({
shadowRadius: 3.5,
elevation: 5,
},
+ buttonListContainer: {
+ height: '80%',
+ width: '100%',
+ display: 'flex',
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ overflow: 'scroll',
+ }
});
diff --git a/styles/ButtonsStyles.ts b/styles/ButtonsStyles.ts
index 5d33ddb..12d8539 100644
--- a/styles/ButtonsStyles.ts
+++ b/styles/ButtonsStyles.ts
@@ -16,7 +16,7 @@ export const ButtonsStyles = StyleSheet.create( {
},
answerButton: {
backgroundColor: "#F3F3F3",
- height: '15%',
+ height: '30%',
alignItems: 'center',
width: '80%',
marginVertical: '3%',
--
GitLab
From a57ac6da87741b362394b5a8fa027bd0a0011ef7 Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Sat, 11 Jan 2025 23:59:50 +0100
Subject: [PATCH 06/16] style: scroll qui ne scroll pas
---
screens/Home/HomeChild.tsx | 5 +-
screens/PlayingQuiz/PlayingQuiz.tsx | 80 ++++++++++++++++++++++++++---
2 files changed, 75 insertions(+), 10 deletions(-)
diff --git a/screens/Home/HomeChild.tsx b/screens/Home/HomeChild.tsx
index 1072366..7a0b645 100644
--- a/screens/Home/HomeChild.tsx
+++ b/screens/Home/HomeChild.tsx
@@ -41,7 +41,8 @@ export default function HomeChild({navigation}: Props) {
});
}
const handleButtonMyQuizzesPressed = () => {
- navigation.navigate("MyQuizzes");
+ // navigation.navigate("MyQuizzes");
+ navigation.navigate("PlayingQuiz", {runId: "1", quizId: "1"});
}
const handleButtonGeneratePressed = () => {
@@ -56,7 +57,7 @@ export default function HomeChild({navigation}: Props) {
<View style={styles.buttonContainer}>
<MenuButton text={"QUICK GAME"} handleButtonPressed={handleButtonQuickGamePressed}/>
<MenuButton text={"PLAY"} handleButtonPressed={handleButtonGeneratePressed}/>
- {/*<MenuButton text={"MY QUIZZES"} handleButtonPressed={handleButtonMyQuizzesPressed}/>*/}
+ <MenuButton text={"MY QUIZZES"} handleButtonPressed={handleButtonMyQuizzesPressed}/>
</View>
<ModalJoinQuiz modalVisible={modalVisible} setModalVisible={setModalVisible} navigation={navigation}/>
</View>
diff --git a/screens/PlayingQuiz/PlayingQuiz.tsx b/screens/PlayingQuiz/PlayingQuiz.tsx
index 406582e..677fb69 100644
--- a/screens/PlayingQuiz/PlayingQuiz.tsx
+++ b/screens/PlayingQuiz/PlayingQuiz.tsx
@@ -29,18 +29,82 @@ export default function PlayingQuiz({route, navigation}:Props) {
const [score, setScore] = useState(0);
const fetchQuizInformations = async () => {
- const quizInformationsFetched = await getQuizInformations(quizId);
- if (HttpError.isHttpError(quizInformationsFetched)) {
- return;
- }
+ // const quizInformationsFetched = await getQuizInformations(quizId);
+ // if (HttpError.isHttpError(quizInformationsFetched)) {
+ // return;
+ // }
+ const quizInformationsFetched: QuizInformations = {
+ id: 1,
+ name: "Quiz de Test",
+ description: "Ceci est un quiz de test pour vérifier l'interface.",
+ isCommunity: true,
+ questionCount: 10,
+ categoryId: 2,
+ difficultyId: 3,
+ authorId: {
+ id: 42,
+ username: "TestAuthor",
+ email: "testauthor@example.com"
+ },
+ createdAt: "2025-01-10T10:00:00Z",
+ updatedAt: "2025-01-11T12:00:00Z",
+ category: {
+ id: 2,
+ name: "Science"
+ },
+ difficulty: {
+ id: 3,
+ name: "Moyenne"
+ }
+ };
+
setQuizInformations(quizInformationsFetched);
}
const fetchActualQuestion = async () => {
- const actualQuestionFetched = await getActualQuestionOfAQuiz(runId);
- if (HttpError.isHttpError(actualQuestionFetched)) {
- return;
- }
+ // const actualQuestionFetched = await getActualQuestionOfAQuiz(runId);
+ // if (HttpError.isHttpError(actualQuestionFetched)) {
+ // return;
+ // }
+ const actualQuestionFetched: Question = {
+ id: 1,
+ text: "Quelle image correspond à une étoile ?",
+ type: "image",
+ categoryId: 2,
+ quizId: "quiz123",
+ order: 1,
+ answers: [
+ {
+ id: 1,
+ text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
+ isCorrect: true,
+ questionId: 1
+ },
+ {
+ id: 2,
+ text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
+ isCorrect: false,
+ questionId: 1
+ },
+ {
+ id: 3,
+ text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
+ isCorrect: false,
+ questionId: 1
+ },
+ {
+ id: 4,
+ text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
+ isCorrect: false,
+ questionId: 1
+ }
+ ],
+ category: {
+ id: 2,
+ name: "Astronomie"
+ }
+ };
+
setActualQuestion(actualQuestionFetched);
}
--
GitLab
From 50097783f5fcbab6429e1161bd898d168711adad Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Sun, 12 Jan 2025 10:16:29 +0100
Subject: [PATCH 07/16] style: size image in image button
---
components/buttons/AnswerButtonImage.tsx | 9 ++++++---
screens/PlayingQuiz/PlayingQuizBody.tsx | 1 -
2 files changed, 6 insertions(+), 4 deletions(-)
diff --git a/components/buttons/AnswerButtonImage.tsx b/components/buttons/AnswerButtonImage.tsx
index bf75c90..61a3f09 100644
--- a/components/buttons/AnswerButtonImage.tsx
+++ b/components/buttons/AnswerButtonImage.tsx
@@ -6,7 +6,6 @@ interface Props{
url: string;
handleButtonPressed:() => void;
buttonStyle?: any;
- buttonImage?: any;
indicator?: number | undefined;
}
@@ -17,7 +16,7 @@ interface Props{
* @param buttonStyle - Surcharge du style du bouton
* @param buttonText - Surcharge du style du texte du bouton
*/
-export default function AnswerButtonImage({url, handleButtonPressed, buttonStyle, buttonImage, indicator}: Props){
+export default function AnswerButtonImage({url, handleButtonPressed, buttonStyle, indicator}: Props){
return(
<TouchableOpacity onPress={handleButtonPressed} style={[styles.defaultButton,buttonStyle]}>
{indicator !== undefined && (
@@ -26,7 +25,7 @@ export default function AnswerButtonImage({url, handleButtonPressed, buttonStyle
</View>
)}
<Image
- style={[TextsStyles.defaultButtonText, {flex: 1, width: "100%", height: "100%"}, buttonImage]}
+ style={[styles.answerImage]}
source={{uri: url}}
/>
</TouchableOpacity>
@@ -58,4 +57,8 @@ const styles = StyleSheet.create({
fontWeight: "bold",
fontSize: 14,
},
+ answerImage: {
+ width: '100%',
+ height: '100%',
+ },
})
\ No newline at end of file
diff --git a/screens/PlayingQuiz/PlayingQuizBody.tsx b/screens/PlayingQuiz/PlayingQuizBody.tsx
index 7fe64e5..eb7fe38 100644
--- a/screens/PlayingQuiz/PlayingQuizBody.tsx
+++ b/screens/PlayingQuiz/PlayingQuizBody.tsx
@@ -129,7 +129,6 @@ export default function PlayingQuizBody({ quizInformations, runId, actualQuestio
url={answer.text}
handleButtonPressed={() => onAnsweredButtonClicked(answer.id)}
buttonStyle={getStyleOfAnswerButton(answer.id, selectedAnswerId, correctAnswerId, quizState)}
- // buttonImage={getStyleOfAnswerButtonText(answer.id, selectedAnswerId, correctAnswerId, quizState)}
/>
:
<AnswerButtonText
--
GitLab
From 40c569ea35b4f992ad67e04e2ab42ba00ea2bb04 Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Sun, 12 Jan 2025 11:17:14 +0100
Subject: [PATCH 08/16] style: center button in the list
---
components/buttons/AnswerButtonImage.tsx | 24 +++++++++++++-----------
screens/PlayingQuiz/PlayingQuizBody.tsx | 19 ++++++++++++-------
styles/ButtonsStyles.ts | 2 +-
3 files changed, 26 insertions(+), 19 deletions(-)
diff --git a/components/buttons/AnswerButtonImage.tsx b/components/buttons/AnswerButtonImage.tsx
index 61a3f09..20b13ff 100644
--- a/components/buttons/AnswerButtonImage.tsx
+++ b/components/buttons/AnswerButtonImage.tsx
@@ -18,17 +18,19 @@ interface Props{
*/
export default function AnswerButtonImage({url, handleButtonPressed, buttonStyle, indicator}: Props){
return(
- <TouchableOpacity onPress={handleButtonPressed} style={[styles.defaultButton,buttonStyle]}>
- {indicator !== undefined && (
- <View style={styles.indicator}>
- <Text style={styles.indicatorText}>{indicator}</Text>
- </View>
- )}
- <Image
- style={[styles.answerImage]}
- source={{uri: url}}
- />
- </TouchableOpacity>
+ <View style={{height: 150, width: '100%'}}>
+ <TouchableOpacity onPress={handleButtonPressed} style={[styles.defaultButton,buttonStyle]}>
+ {indicator !== undefined && (
+ <View style={styles.indicator}>
+ <Text style={styles.indicatorText}>{indicator}</Text>
+ </View>
+ )}
+ <Image
+ style={[styles.answerImage]}
+ source={{uri: url}}
+ />
+ </TouchableOpacity>
+ </View>
)
}
diff --git a/screens/PlayingQuiz/PlayingQuizBody.tsx b/screens/PlayingQuiz/PlayingQuizBody.tsx
index eb7fe38..cdbc278 100644
--- a/screens/PlayingQuiz/PlayingQuizBody.tsx
+++ b/screens/PlayingQuiz/PlayingQuizBody.tsx
@@ -1,4 +1,4 @@
-import {View, StyleSheet, Text, ActivityIndicator} from "react-native";
+import {View, StyleSheet, Text, ActivityIndicator, ScrollView} from "react-native";
import DefaultButton from "../../components/buttons/DefaultButton";
import { ButtonsStyles } from "../../styles/ButtonsStyles";
import React, { useState, useEffect, SetStateAction, Dispatch } from "react";
@@ -121,7 +121,10 @@ export default function PlayingQuizBody({ quizInformations, runId, actualQuestio
<View style={styles.buttonContainer}>
{actualQuestion ? (
<>
- <View style={styles.buttonListContainer}>
+ <ScrollView
+ style={styles.buttonListContainer}
+ contentContainerStyle={styles.buttonListContentContainer}
+ >
{actualQuestion.answers.map((answer, index) => (
actualQuestion.type === "image" ?
<AnswerButtonImage
@@ -139,7 +142,8 @@ export default function PlayingQuizBody({ quizInformations, runId, actualQuestio
buttonText={getStyleOfAnswerButtonText(answer.id, selectedAnswerId, correctAnswerId, quizState)}
/>
))}
- </View>
+ {/* </View> */}
+ </ScrollView>
<View style={styles.playButtonContainer}>
<BlueButton onPress={() => quizState === QuizState.ANSWERING ? onValidation() : onContinue()} text={quizState === QuizState.ANSWERING ? "CONFIRM" : "CONTINUE"} buttonStyle={{borderRadius: 50}} isDisabled={false}/>
</View>
@@ -212,7 +216,7 @@ const styles = StyleSheet.create({
},
answerButton: {
backgroundColor: "#F3F3F3",
- height: '30%',
+ height: '75%',
alignItems: 'center',
width: '80%',
marginVertical: '3%',
@@ -224,12 +228,13 @@ const styles = StyleSheet.create({
elevation: 5,
},
buttonListContainer: {
- height: '80%',
+ maxHeight: '80%',
width: '100%',
+ },
+ buttonListContentContainer: {
display: 'flex',
justifyContent: 'flex-start',
- alignItems: 'center',
- overflow: 'scroll',
+ alignItems: 'center'
}
});
diff --git a/styles/ButtonsStyles.ts b/styles/ButtonsStyles.ts
index 12d8539..679e720 100644
--- a/styles/ButtonsStyles.ts
+++ b/styles/ButtonsStyles.ts
@@ -16,7 +16,7 @@ export const ButtonsStyles = StyleSheet.create( {
},
answerButton: {
backgroundColor: "#F3F3F3",
- height: '30%',
+ height: '75%',
alignItems: 'center',
width: '80%',
marginVertical: '3%',
--
GitLab
From 78c706965c098045ca988dfe3a063bfb7ddeea64 Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Sun, 12 Jan 2025 11:18:11 +0100
Subject: [PATCH 09/16] refactor: move the style to a var
---
components/buttons/AnswerButtonImage.tsx | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/components/buttons/AnswerButtonImage.tsx b/components/buttons/AnswerButtonImage.tsx
index 20b13ff..8716144 100644
--- a/components/buttons/AnswerButtonImage.tsx
+++ b/components/buttons/AnswerButtonImage.tsx
@@ -18,7 +18,7 @@ interface Props{
*/
export default function AnswerButtonImage({url, handleButtonPressed, buttonStyle, indicator}: Props){
return(
- <View style={{height: 150, width: '100%'}}>
+ <View style={styles.containerButton}>
<TouchableOpacity onPress={handleButtonPressed} style={[styles.defaultButton,buttonStyle]}>
{indicator !== undefined && (
<View style={styles.indicator}>
@@ -63,4 +63,11 @@ const styles = StyleSheet.create({
width: '100%',
height: '100%',
},
+ containerButton: {
+ height: 150,
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center'
+ }
})
\ No newline at end of file
--
GitLab
From 13d4373153eac1f8bdf8bef48fe3e6266a8aa7f4 Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Sun, 12 Jan 2025 11:19:22 +0100
Subject: [PATCH 10/16] style: update answerbuttonText to fit with the list
---
components/buttons/AnswerButtonText.tsx | 25 +++++++++++++++++--------
1 file changed, 17 insertions(+), 8 deletions(-)
diff --git a/components/buttons/AnswerButtonText.tsx b/components/buttons/AnswerButtonText.tsx
index 6dbc8b4..57427b4 100644
--- a/components/buttons/AnswerButtonText.tsx
+++ b/components/buttons/AnswerButtonText.tsx
@@ -19,14 +19,16 @@ interface Props{
*/
export default function AnswerButtonText({text, handleButtonPressed, buttonStyle, buttonText, indicator}: Props){
return(
- <TouchableOpacity onPress={handleButtonPressed} style={[styles.defaultButton,buttonStyle]}>
- {indicator !== undefined && (
- <View style={styles.indicator}>
- <Text style={styles.indicatorText}>{indicator}</Text>
- </View>
- )}
- <Text style={[TextsStyles.defaultButtonText, buttonText]}>{text}</Text>
- </TouchableOpacity>
+ <View style={styles.containerButton}>
+ <TouchableOpacity onPress={handleButtonPressed} style={[styles.defaultButton,buttonStyle]}>
+ {indicator !== undefined && (
+ <View style={styles.indicator}>
+ <Text style={styles.indicatorText}>{indicator}</Text>
+ </View>
+ )}
+ <Text style={[TextsStyles.defaultButtonText, buttonText]}>{text}</Text>
+ </TouchableOpacity>
+ </View>
)
}
@@ -55,4 +57,11 @@ const styles = StyleSheet.create({
fontWeight: "bold",
fontSize: 14,
},
+ containerButton: {
+ height: 150,
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center'
+ }
})
\ No newline at end of file
--
GitLab
From 063991ba682ea3d6762d296360e9464105c8a0cf Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Sun, 12 Jan 2025 11:20:04 +0100
Subject: [PATCH 11/16] temp: add test value
---
screens/PlayingQuiz/PlayingQuiz.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/screens/PlayingQuiz/PlayingQuiz.tsx b/screens/PlayingQuiz/PlayingQuiz.tsx
index 677fb69..9bfdfda 100644
--- a/screens/PlayingQuiz/PlayingQuiz.tsx
+++ b/screens/PlayingQuiz/PlayingQuiz.tsx
@@ -69,7 +69,7 @@ export default function PlayingQuiz({route, navigation}:Props) {
const actualQuestionFetched: Question = {
id: 1,
text: "Quelle image correspond à une étoile ?",
- type: "image",
+ type: "imae",
categoryId: 2,
quizId: "quiz123",
order: 1,
--
GitLab
From 3dca0cbbec5b411713e0af1a2d62b1944413fd47 Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Thu, 16 Jan 2025 14:18:29 +0100
Subject: [PATCH 12/16] refactor: rename file answerbutton
---
components/buttons/{AnswerButtonText.tsx => AnswerButton.tsx} | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
rename components/buttons/{AnswerButtonText.tsx => AnswerButton.tsx} (88%)
diff --git a/components/buttons/AnswerButtonText.tsx b/components/buttons/AnswerButton.tsx
similarity index 88%
rename from components/buttons/AnswerButtonText.tsx
rename to components/buttons/AnswerButton.tsx
index 57427b4..00e8876 100644
--- a/components/buttons/AnswerButtonText.tsx
+++ b/components/buttons/AnswerButton.tsx
@@ -11,13 +11,13 @@ interface Props{
}
/**
- * AnswerButtonText : Un bouton par défaut, il possède déjà un style mais on peut le surcharger grâce à la propriété buttonStyle
+ * AnswerButton : Un bouton par défaut, il possède déjà un style mais on peut le surcharger grâce à la propriété buttonStyle
* @param text - Texte du bouton
* @param handleButtonPressed - Fonction qui sera exécutée lorsque le bouton sera pressé
* @param buttonStyle - Surcharge du style du bouton
* @param buttonText - Surcharge du style du texte du bouton
*/
-export default function AnswerButtonText({text, handleButtonPressed, buttonStyle, buttonText, indicator}: Props){
+export default function AnswerButton({text, handleButtonPressed, buttonStyle, buttonText, indicator}: Props){
return(
<View style={styles.containerButton}>
<TouchableOpacity onPress={handleButtonPressed} style={[styles.defaultButton,buttonStyle]}>
--
GitLab
From 558c3f2f07a16abe496fea36d6e9583555486ccb Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Thu, 16 Jan 2025 14:19:11 +0100
Subject: [PATCH 13/16] feat: remove brut quiz
---
screens/PlayingQuiz/PlayingQuiz.tsx | 86 ++++-------------------------
1 file changed, 11 insertions(+), 75 deletions(-)
diff --git a/screens/PlayingQuiz/PlayingQuiz.tsx b/screens/PlayingQuiz/PlayingQuiz.tsx
index 8c6546d..50867a5 100644
--- a/screens/PlayingQuiz/PlayingQuiz.tsx
+++ b/screens/PlayingQuiz/PlayingQuiz.tsx
@@ -30,85 +30,21 @@ export default function PlayingQuiz({route, navigation}:Props) {
const [score, setScore] = useState(0);
const fetchQuizInformations = async () => {
- // const quizInformationsFetched = await getQuizInformations(quizId);
- // if (HttpError.isHttpError(quizInformationsFetched)) {
- // return;
- // }
- const quizInformationsFetched: QuizInformations = {
- id: 1,
- name: "Quiz de Test",
- description: "Ceci est un quiz de test pour vérifier l'interface.",
- isCommunity: true,
- questionCount: 10,
- categoryId: 2,
- difficultyId: 3,
- authorId: {
- id: 42,
- username: "TestAuthor",
- email: "testauthor@example.com"
- },
- createdAt: "2025-01-10T10:00:00Z",
- updatedAt: "2025-01-11T12:00:00Z",
- category: {
- id: 2,
- name: "Science"
- },
- difficulty: {
- id: 3,
- name: "Moyenne"
- }
- };
-
+ const quizInformationsFetched = await getQuizInformations(quizId);
+ if (HttpError.isHttpError(quizInformationsFetched)) {
+ return;
+ }
+
setQuizInformations(quizInformationsFetched);
}
const fetchActualQuestion = async () => {
- // const actualQuestionFetched = await getActualQuestionOfAQuiz(runId);
- // if (HttpError.isHttpError(actualQuestionFetched)) {
- // return;
- // }
- // const actualQuestionFetchedShuffle = shuffleAnswersOfQuiz(actualQuestionFetched);
- // setActualQuestion(actualQuestionFetchedShuffle);
- const actualQuestionFetched: Question = {
- id: 1,
- text: "Quelle image correspond à une étoile ?",
- type: "imae",
- categoryId: 2,
- quizId: "quiz123",
- order: 1,
- answers: [
- {
- id: 1,
- text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
- isCorrect: true,
- questionId: 1
- },
- {
- id: 2,
- text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
- isCorrect: false,
- questionId: 1
- },
- {
- id: 3,
- text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
- isCorrect: false,
- questionId: 1
- },
- {
- id: 4,
- text: "https://st3.depositphotos.com/4164031/15614/i/450/depositphotos_156147646-stock-photo-star-field-in-deep-space.jpg",
- isCorrect: false,
- questionId: 1
- }
- ],
- category: {
- id: 2,
- name: "Astronomie"
- }
- };
-
- setActualQuestion(actualQuestionFetched);
+ const actualQuestionFetched = await getActualQuestionOfAQuiz(runId);
+ if (HttpError.isHttpError(actualQuestionFetched)) {
+ return;
+ }
+ const actualQuestionFetchedShuffle = shuffleAnswersOfQuiz(actualQuestionFetched);
+ setActualQuestion(actualQuestionFetchedShuffle);
}
useEffect(() => {
--
GitLab
From 2c6f197c9b850a0e5170b317621db4fedf939c7e Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Thu, 16 Jan 2025 14:39:48 +0100
Subject: [PATCH 14/16] feat: allow image and text
---
components/buttons/AnswerButton.tsx | 23 +++++++++++++++++++----
1 file changed, 19 insertions(+), 4 deletions(-)
diff --git a/components/buttons/AnswerButton.tsx b/components/buttons/AnswerButton.tsx
index 00e8876..5577e08 100644
--- a/components/buttons/AnswerButton.tsx
+++ b/components/buttons/AnswerButton.tsx
@@ -1,4 +1,4 @@
-import {TouchableOpacity, Text, StyleSheet, View} from "react-native";
+import {TouchableOpacity, Text, StyleSheet, View, Image} from "react-native";
import {ButtonsStyles} from "../../styles/ButtonsStyles";
import {TextsStyles} from "../../styles/TextsStyles";
@@ -23,10 +23,21 @@ export default function AnswerButton({text, handleButtonPressed, buttonStyle, bu
<TouchableOpacity onPress={handleButtonPressed} style={[styles.defaultButton,buttonStyle]}>
{indicator !== undefined && (
<View style={styles.indicator}>
- <Text style={styles.indicatorText}>{indicator}</Text>
+ <Text style={styles.indicatorText}>{indicator}</Text>
</View>
)}
- <Text style={[TextsStyles.defaultButtonText, buttonText]}>{text}</Text>
+ {
+ text.includes('data:image') ?
+ <Image
+ style={[styles.answerImage]}
+ source={{uri: text}}
+ />
+ :
+ text.includes('data:sound') ?
+ ''
+ :
+ <Text style={[TextsStyles.defaultButtonText, buttonText]}>{text}</Text>
+ }
</TouchableOpacity>
</View>
)
@@ -63,5 +74,9 @@ const styles = StyleSheet.create({
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
- }
+ },
+ answerImage: {
+ width: '100%',
+ height: '100%',
+ },
})
\ No newline at end of file
--
GitLab
From 602694dbf5586d89b247d35b62638aab32d8b291 Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Thu, 16 Jan 2025 14:40:00 +0100
Subject: [PATCH 15/16] feat: use answerbutton
---
screens/PlayingQuiz/PlayingQuizBody.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/screens/PlayingQuiz/PlayingQuizBody.tsx b/screens/PlayingQuiz/PlayingQuizBody.tsx
index 8c4f472..619e3b7 100644
--- a/screens/PlayingQuiz/PlayingQuizBody.tsx
+++ b/screens/PlayingQuiz/PlayingQuizBody.tsx
@@ -9,7 +9,7 @@ import BlueButton from "../../components/buttons/BlueButton";
import {Question} from "../../models/Question";
import {Answer} from "../../models/Answer";
import {Quiz} from "../../models/Quiz";
-import AnswerButtonText from "../../components/buttons/AnswerButtonText";
+import AnswerButton from "../../components/buttons/AnswerButton";
import {QuizInformations} from "../../models/QuizInformations";
import AnswerButtonImage from "../../components/buttons/AnswerButtonImage";
@@ -144,7 +144,7 @@ export default function PlayingQuizBody({ quizInformations, runId, actualQuestio
buttonStyle={getStyleOfAnswerButton(answer.id, selectedAnswerId, correctAnswerId, quizState)}
/>
:
- <AnswerButtonText
+ <AnswerButton
key={index}
text={answer.text}
handleButtonPressed={() => onAnsweredButtonClicked(answer.id)}
--
GitLab
From 4b80b76095090c6a6c0068aebd79fd87ddbaee1e Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Thu, 16 Jan 2025 15:00:15 +0100
Subject: [PATCH 16/16] feat: sound not supported
---
components/buttons/AnswerButton.tsx | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/components/buttons/AnswerButton.tsx b/components/buttons/AnswerButton.tsx
index 5577e08..5b861da 100644
--- a/components/buttons/AnswerButton.tsx
+++ b/components/buttons/AnswerButton.tsx
@@ -1,6 +1,7 @@
import {TouchableOpacity, Text, StyleSheet, View, Image} from "react-native";
import {ButtonsStyles} from "../../styles/ButtonsStyles";
import {TextsStyles} from "../../styles/TextsStyles";
+import React from "react";
interface Props{
text: string;
@@ -33,8 +34,8 @@ export default function AnswerButton({text, handleButtonPressed, buttonStyle, bu
source={{uri: text}}
/>
:
- text.includes('data:sound') ?
- ''
+ text.includes('data:audio') ?
+ <Text style={[TextsStyles.defaultButtonText, buttonText]}>sound: not supported</Text>
:
<Text style={[TextsStyles.defaultButtonText, buttonText]}>{text}</Text>
}
--
GitLab