add button color on answer

vds-app/App/components/Button.js

@@ -31,20 +31,31 @@ const styles = StyleSheet.create({
   }
 })
 
-export const Button = ({ text, subtitle = null, isBig = false, onPress = () => {} }) => {
+export const Button = ({ text, subtitle = null, isBig = false, colorize = false,  onPress = () => {} }) => {
 
   const buttonBig = isBig ? {fontSize: 25} : {}
+  let buttonColor = {backgroundColor: colors.white_alpha}
+  if(colorize && colorize.answered) {
+    //console.log(colorize)
+    if(colorize.isCorrect) {
+      buttonColor = {backgroundColor: colors.green_light}
+    } else {
+      if(colorize.clicked == colorize.id) {
+        buttonColor = {backgroundColor: colors.red_light}
+      }
+    }
+  }
 
   if(subtitle) {
     return (
-      <TouchableOpacity onPress={onPress} style={styles.button}>
+      <TouchableOpacity onPress={onPress} style={[styles.button, {backgroundColor: colors.white_alpha}]}>
         <Text style={[styles.text, buttonBig]}>{text}</Text>
         <Text style={styles.subtitle}>{subtitle}</Text>
       </TouchableOpacity>
     )
   } else {
     return (
-      <TouchableOpacity onPress={onPress} style={styles.button}>
+      <TouchableOpacity onPress={onPress} style={[styles.button, buttonColor]}>
         <Text style={[styles.text, buttonBig]}>{text}</Text>
       </TouchableOpacity>
     )

vds-app/App/components/Variables.js

@@ -8,8 +8,10 @@ export const colors = {
   dark_blue: "#1279be",
   red: "#af321e",
   red_alpha: "rgba(175, 50, 30, 0.9)",
+  red_light: "#af442f",
   green: "#28A125",
   green_alpha: "rgba(40, 160, 40, 0.9)",
+  green_light: "#5bc135",
   yellow: "#e1ff3c",
   yellow_alpha: "rgba(225, 255, 60, 0.9)",
   orange: "#ff9b32"

vds-app/App/screens/Banner.js

@@ -38,7 +38,7 @@ class Banner extends React.Component {
   }
 
   bannerError = (e) => {
-    console.log("Banner error: ", e)
+    //console.log("Banner error: ", e)
   }
 
   render() {

vds-app/App/screens/Exam.js

@@ -54,10 +54,10 @@ class Exam extends React.Component {
     timer: maxTime
   }
 
-  answer = correct => {
+  answer = (correct, id) => {
     this.setState(
       state => {
-        const nextState = { answered: true }
+        const nextState = { answered: true, clickedId: id }
 
         if (correct) {
           nextState.correctCount = state.correctCount + 1
@@ -71,7 +71,7 @@ class Exam extends React.Component {
       },
       () => {
         if(this.state.timer > 1 || (this.state.correctCount+this.state.wrongCount) < this.state.totalCount) {
-          setTimeout(() => this.nextQuestion(), 750)
+          setTimeout(() => this.nextQuestion(), correct ? 750 : 2000)
         }
       }
     )
@@ -138,7 +138,8 @@ class Exam extends React.Component {
                 <Button
                   key={answer.id}
                   text={answer.text}
-                  onPress={() => this.answer(answer.correct)}
+                  colorize={{id: answer.id, clicked: this.state.clickedId, answered: this.state.answered, isCorrect: answer.correct}}
+                  onPress={() => this.answer(answer.correct, answer.id)}
                 />
               ))}
             </ButtonContainer>

vds-app/App/screens/Quiz.js

@@ -42,10 +42,10 @@ class Quiz extends React.Component {
     results: false
   }
 
-  answer = correct => {
+  answer = (correct, id) => {
     this.setState(
       state => {
-        const nextState = { answered: true }
+        const nextState = { answered: true, clickedId: id }
 
         if (correct) {
           nextState.correctCount = state.correctCount + 1
@@ -58,7 +58,7 @@ class Quiz extends React.Component {
         return nextState
       },
       () => {
-        setTimeout(() => this.nextQuestion(), 750)
+        setTimeout(() => this.nextQuestion(), correct ? 750 : 3000)
       }
     )
   }
@@ -102,11 +102,12 @@ class Quiz extends React.Component {
             <Text style={styles.text}>{question.question}</Text>
 
             <ButtonContainer>
-              {question.answers.map(answer => (
+              {question.answers.map( (answer, index) => (
                 <Button
                   key={answer.id}
                   text={answer.text}
-                  onPress={() => this.answer(answer.correct)}
+                  colorize={{id: answer.id, clicked: this.state.clickedId, answered: this.state.answered, isCorrect: answer.correct}}
+                  onPress={() => this.answer(answer.correct, answer.id)}
                 />
               ))}
             </ButtonContainer>
@@ -116,10 +117,7 @@ class Quiz extends React.Component {
             {`${this.state.correctCount+this.state.wrongCount}/${this.state.totalCount}`}
           </Text>
         </SafeAreaView>
-        <Alert
-          correct={this.state.answerCorrect}
-          visible={this.state.answered}
-        />
+
         <Results
           total={this.state.totalCount}
           correct={this.state.correctCount}

vds-app/App/screens/Splash.js

@@ -88,7 +88,7 @@ class Splash extends React.Component {
   }
 
   bannerError = (e) => {
-    console.log("Banner error: ", e)
+    //console.log("Banner error: ", e)
   }
 
   render() {