merge Feature/122 answer with image

Merge branch 'feature/122-answer-with-image' into 'develop'

components/buttons/AnswerButton.tsx

-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

components/buttons/AnswerButtonImage.tsx

+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

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 = () => {

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);
     }
 

screens/PlayingQuiz/PlayingQuizBody.tsx

-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'
+    }
 });
 

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%',

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