diff --git a/components/buttons/AnswerButton.tsx b/components/buttons/AnswerButton.tsx
index 2cc1fb6856012bf9cb8c62727e6762f9c88f21f2..5b861da586b2e3dc37366d3ea982c9ac136b67ba 100644
--- a/components/buttons/AnswerButton.tsx
+++ b/components/buttons/AnswerButton.tsx
@@ -1,6 +1,7 @@
-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";
+import React from "react";
interface Props{
text: string;
@@ -19,14 +20,27 @@ interface Props{
*/
export default function AnswerButton({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.includes('data:image') ?
+ <Image
+ style={[styles.answerImage]}
+ source={{uri: text}}
+ />
+ :
+ text.includes('data:audio') ?
+ <Text style={[TextsStyles.defaultButtonText, buttonText]}>sound: not supported</Text>
+ :
+ <Text style={[TextsStyles.defaultButtonText, buttonText]}>{text}</Text>
+ }
+ </TouchableOpacity>
+ </View>
)
}
@@ -55,4 +69,15 @@ const styles = StyleSheet.create({
fontWeight: "bold",
fontSize: 14,
},
+ containerButton: {
+ height: 150,
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center'
+ },
+ answerImage: {
+ width: '100%',
+ height: '100%',
+ },
})
\ No newline at end of file
diff --git a/components/buttons/AnswerButtonImage.tsx b/components/buttons/AnswerButtonImage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8716144bd818a697248cf67eddd8e6a29e1b0cb3
--- /dev/null
+++ b/components/buttons/AnswerButtonImage.tsx
@@ -0,0 +1,73 @@
+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;
+ 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, indicator}: Props){
+ return(
+ <View style={styles.containerButton}>
+ <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>
+ )
+}
+
+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,
+ },
+ answerImage: {
+ width: '100%',
+ height: '100%',
+ },
+ containerButton: {
+ height: 150,
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center'
+ }
+})
\ No newline at end of file
diff --git a/screens/Home/HomeChild.tsx b/screens/Home/HomeChild.tsx
index 5aaf32638d315f3288a1b615a3ad603e4911ced0..718249ec2e100614a2f32161a170812836a1d042 100644
--- a/screens/Home/HomeChild.tsx
+++ b/screens/Home/HomeChild.tsx
@@ -39,7 +39,8 @@ export default function HomeChild({navigation}: Props) {
});
}
const handleButtonMyQuizzesPressed = () => {
- navigation.navigate("MyQuizzes");
+ // navigation.navigate("MyQuizzes");
+ navigation.navigate("PlayingQuiz", {runId: "1", quizId: "1"});
}
const handleButtonGeneratePressed = () => {
diff --git a/screens/PlayingQuiz/PlayingQuiz.tsx b/screens/PlayingQuiz/PlayingQuiz.tsx
index 50ca0a40cfe0ab7942c2a44784f6eeeb6128be44..50867a592fac7a6d83d3f609bd94ed5f1bdfa5da 100644
--- a/screens/PlayingQuiz/PlayingQuiz.tsx
+++ b/screens/PlayingQuiz/PlayingQuiz.tsx
@@ -33,7 +33,8 @@ export default function PlayingQuiz({route, navigation}:Props) {
const quizInformationsFetched = await getQuizInformations(quizId);
if (HttpError.isHttpError(quizInformationsFetched)) {
return;
- }
+ }
+
setQuizInformations(quizInformationsFetched);
}
diff --git a/screens/PlayingQuiz/PlayingQuizBody.tsx b/screens/PlayingQuiz/PlayingQuizBody.tsx
index 6a220d2fdfbd6816e8283a4611672f2a0a8c7302..619e3b7c2e91e2879e7c388106b136af79b794c5 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";
@@ -11,6 +11,7 @@ import {Answer} from "../../models/Answer";
import {Quiz} from "../../models/Quiz";
import AnswerButton from "../../components/buttons/AnswerButton";
import {QuizInformations} from "../../models/QuizInformations";
+import AnswerButtonImage from "../../components/buttons/AnswerButtonImage";
interface Props {
quizInformations?: QuizInformations;
@@ -130,15 +131,29 @@ export default function PlayingQuizBody({ quizInformations, runId, actualQuestio
<View style={styles.buttonContainer}>
{actualQuestion ? (
<>
- {actualQuestion.answers.map((answer, index) => (
- <AnswerButton
- key={index}
- text={answer.text}
- handleButtonPressed={() => onAnsweredButtonClicked(answer.id)}
- buttonStyle={getStyleOfAnswerButton(answer.id, selectedAnswerId, correctAnswerId, quizState)}
- buttonText={getStyleOfAnswerButtonText(answer.id, selectedAnswerId, correctAnswerId, quizState)}
- />
- ))}
+ <ScrollView
+ style={styles.buttonListContainer}
+ contentContainerStyle={styles.buttonListContentContainer}
+ >
+ {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)}
+ />
+ :
+ <AnswerButton
+ key={index}
+ text={answer.text}
+ handleButtonPressed={() => onAnsweredButtonClicked(answer.id)}
+ buttonStyle={getStyleOfAnswerButton(answer.id, selectedAnswerId, correctAnswerId, quizState)}
+ buttonText={getStyleOfAnswerButtonText(answer.id, selectedAnswerId, correctAnswerId, quizState)}
+ />
+ ))}
+ {/* </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>
@@ -211,7 +226,7 @@ const styles = StyleSheet.create({
},
answerButton: {
backgroundColor: "#F3F3F3",
- height: '15%',
+ height: '75%',
alignItems: 'center',
width: '80%',
marginVertical: '3%',
@@ -222,5 +237,14 @@ const styles = StyleSheet.create({
shadowRadius: 3.5,
elevation: 5,
},
+ buttonListContainer: {
+ maxHeight: '80%',
+ width: '100%',
+ },
+ buttonListContentContainer: {
+ display: 'flex',
+ justifyContent: 'flex-start',
+ alignItems: 'center'
+ }
});
diff --git a/styles/ButtonsStyles.ts b/styles/ButtonsStyles.ts
index 5d33ddbbb750531bfa3c60fe91cb23fbe83a7ad4..679e720b75f7e36b6dce1b7ba21c2b23971d789d 100644
--- a/styles/ButtonsStyles.ts
+++ b/styles/ButtonsStyles.ts
@@ -16,7 +16,7 @@ export const ButtonsStyles = StyleSheet.create( {
},
answerButton: {
backgroundColor: "#F3F3F3",
- height: '15%',
+ height: '75%',
alignItems: 'center',
width: '80%',
marginVertical: '3%',
diff --git a/templates/TemplateDuo.tsx b/templates/TemplateDuo.tsx
index 97a225ee3e2c3778ab5105f11af211670f8b7605..c347a2d41658b3bdf03fc5b9c313f700ca5dfe3f 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