From 259116ace0d6577ae6a6528799c2e08721a5cf43 Mon Sep 17 00:00:00 2001
From: Dslak <dslaky@gmail.com>
Date: Fri, 1 Nov 2019 14:49:15 +0100
Subject: [PATCH 1/2] add button color on answer

---
 vds-app/App/components/Button.js    | 17 ++++++++++++++---
 vds-app/App/components/Variables.js |  2 ++
 vds-app/App/screens/Banner.js       |  2 +-
 vds-app/App/screens/Exam.js         |  9 +++++----
 vds-app/App/screens/Quiz.js         | 16 +++++++---------
 vds-app/App/screens/Splash.js       |  2 +-
 6 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/vds-app/App/components/Button.js b/vds-app/App/components/Button.js
index 5fe22d6..b57f336 100644
--- a/vds-app/App/components/Button.js
+++ b/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>
     )
diff --git a/vds-app/App/components/Variables.js b/vds-app/App/components/Variables.js
index d177f29..bfa8c5e 100644
--- a/vds-app/App/components/Variables.js
+++ b/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"
diff --git a/vds-app/App/screens/Banner.js b/vds-app/App/screens/Banner.js
index 5b5c52d..c7432dd 100644
--- a/vds-app/App/screens/Banner.js
+++ b/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() {
diff --git a/vds-app/App/screens/Exam.js b/vds-app/App/screens/Exam.js
index 4aa7998..c177921 100644
--- a/vds-app/App/screens/Exam.js
+++ b/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>
diff --git a/vds-app/App/screens/Quiz.js b/vds-app/App/screens/Quiz.js
index 769d4cb..92cf1cf 100644
--- a/vds-app/App/screens/Quiz.js
+++ b/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}
diff --git a/vds-app/App/screens/Splash.js b/vds-app/App/screens/Splash.js
index a7e2e6e..3bc5b0b 100644
--- a/vds-app/App/screens/Splash.js
+++ b/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() {

From 2384b9384984ffa6b197c718452371f76bb76bf1 Mon Sep 17 00:00:00 2001
From: Dslak <dslaky@gmail.com>
Date: Fri, 1 Nov 2019 16:32:27 +0100
Subject: [PATCH 2/2] button colors background

---
 vds-app/App/components/Button.js    | 14 +++++++++-----
 vds-app/App/components/Variables.js |  8 ++++----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/vds-app/App/components/Button.js b/vds-app/App/components/Button.js
index b57f336..2c4fdad 100644
--- a/vds-app/App/components/Button.js
+++ b/vds-app/App/components/Button.js
@@ -5,6 +5,8 @@ import { colors } from "../components/Variables"
 const styles = StyleSheet.create({
   button: {
     backgroundColor: colors.white_alpha,
+    borderWidth: 4,
+    borderColor: 'transparent',
     borderRadius: 10,
     paddingHorizontal: 10,
     paddingVertical: 10,
@@ -34,21 +36,23 @@ const styles = StyleSheet.create({
 export const Button = ({ text, subtitle = null, isBig = false, colorize = false,  onPress = () => {} }) => {
 
   const buttonBig = isBig ? {fontSize: 25} : {}
+  const isClicked = colorize.clicked == colorize.id
   let buttonColor = {backgroundColor: colors.white_alpha}
+
   if(colorize && colorize.answered) {
-    //console.log(colorize)
+
     if(colorize.isCorrect) {
-      buttonColor = {backgroundColor: colors.green_light}
+      buttonColor = {backgroundColor: colors.green_light, borderColor: isClicked ? colors.white_alpha : 'transparent'}
     } else {
-      if(colorize.clicked == colorize.id) {
-        buttonColor = {backgroundColor: colors.red_light}
+      if(isClicked) {
+        buttonColor = {backgroundColor: colors.red_light, borderColor: isClicked ? colors.white_alpha : 'transparent'}
       }
     }
   }
 
   if(subtitle) {
     return (
-      <TouchableOpacity onPress={onPress} style={[styles.button, {backgroundColor: colors.white_alpha}]}>
+      <TouchableOpacity onPress={onPress} style={[styles.button, buttonColor]}>
         <Text style={[styles.text, buttonBig]}>{text}</Text>
         <Text style={styles.subtitle}>{subtitle}</Text>
       </TouchableOpacity>
diff --git a/vds-app/App/components/Variables.js b/vds-app/App/components/Variables.js
index bfa8c5e..74e4d56 100644
--- a/vds-app/App/components/Variables.js
+++ b/vds-app/App/components/Variables.js
@@ -4,21 +4,21 @@ export const colors = {
   black: "#000",
   purple: "#8c0072",
   purple_light: "#a30085",
-  blue: "#15a7f0",
+  blue: "#1385d0",
   dark_blue: "#1279be",
   red: "#af321e",
   red_alpha: "rgba(175, 50, 30, 0.9)",
-  red_light: "#af442f",
+  red_light: "#af5d44",
   green: "#28A125",
   green_alpha: "rgba(40, 160, 40, 0.9)",
-  green_light: "#5bc135",
+  green_light: "#6cc155",
   yellow: "#e1ff3c",
   yellow_alpha: "rgba(225, 255, 60, 0.9)",
   orange: "#ff9b32"
 }
 
 export const texts = {
-  quizzes: "Seleziona un quiz",
+  quizzes: "Seleziona un argomento",
   section_quizzes: "Quiz per argomento",
   exam: "Simulazione esame",
   exam_simulation: "30 domande in 30min",