#50 finish kanji quiz screen

ZendyLim · May 29, 2018 · 6e25613 · 6e25613
1 parent 8587a6d
commit 6e25613
Show file tree

Hide file tree

Showing 8 changed files with 161 additions and 20 deletions.
diff --git a/app/component/answerButton.js b/app/component/answerButton.js
@@ -38,8 +38,11 @@ class AnswerButton extends Component {
           break;
       }
 
+      centerIcon = ['quizSquared','quizKanji'];
+      center = centerIcon.indexOf(this.props.styleFormat) > -1;
+
       return(
-        <View style={[ styles.quizBtnIconWrapper, this.props.isCorrect ? styles.quizBtnIconCorrect : styles.quizBtnIconWrong, this.props.styleFormat != 'quizSquared' && styles.quizBtnIconLeft  ]}>
+        <View style={[ styles.quizBtnIconWrapper, this.props.isCorrect ? styles.quizBtnIconCorrect : styles.quizBtnIconWrong, !center && styles.quizBtnIconLeft  ]}>
           <Icon name={ iconName }  style={ [ styles.quizBtnIcon ] } />
         </View>
       );

diff --git a/app/component/fillButton.js b/app/component/fillButton.js
@@ -12,7 +12,8 @@ class FillButton extends Component {
     textData: PropTypes.object,
     id: PropTypes.string,
     isCorrect: PropTypes.number,
-    styleFormat: PropTypes.string
+    styleFormat: PropTypes.string,
+    extraChar: PropTypes.string,
   };
 
   constructor(props) {
@@ -23,6 +24,7 @@ class FillButton extends Component {
         answerButton:[]
       } 
       this.current = '';
+      this.answerLength = 0;
   }
 
     _renderIcon(){
@@ -52,12 +54,17 @@ class FillButton extends Component {
 
     setFillButtons(){
         if(this.current != this.props.textDisplay){
-            this.current = this.props.textDisplay;        
-            answerString = this.props.textDisplay;
-            answerString = answerString.split('');
+            this.current = this.props.textDisplay;    
+
+            let answerString = this.props.textDisplay;
+            let extraString = this.props.extraChar;
+
+            answerString = answerString.split('');            
+
             this.emptyBox = [];
+            this.answerLength = answerString.length;
 
-            for(i = 0; i < answerString.length; i++){
+            for(i = 0; i < this.answerLength; i++){
                 answerString[i] = {
                     selected: false,
                     char: answerString[i]
@@ -69,6 +76,14 @@ class FillButton extends Component {
                 };
             }
 
+            for(i = 0; i < extraString.length; i++){
+                answerString[i] = {
+                    selected: false,
+                    char: extraString[i]
+                };
+            }
+
+
             this.shuffledString =  this.shuffle(answerString);    
         }
 
@@ -129,7 +144,7 @@ class FillButton extends Component {
     fillEmpty(char,key) {
         filled = '';
         fillBox = true;
-        for(i = 0; i < this.shuffledString.length; i++){
+        for(i = 0; i < this.answerLength; i++){
             if(fillBox && !this.emptyBox[i].char){
                 this.emptyBox[i].char = char;
                 this.emptyBox[i].key = key;

diff --git a/app/component/question.js b/app/component/question.js
@@ -77,11 +77,11 @@ class QuestionPanel extends Component {
     else{
       return(
           <View style={[ styles.questionContainer, styles.col12 ]}>
-            <Text style={ [styles.questionInsText, this.props.styleFormat == 'quizSquared' ? styles.questionText : styles.questionLongInstruction ] }>
+            <Text style={ [styles.questionInsText, styles[this.props.styleFormat + 'Instruction']]}>
                 {strings.QUESTION_SELECT}
             </Text>
             <Text 
-              style={ [styles.questionBigText, this.props.styleFormat == 'quizSquared' ? styles.questionText : styles.questionLong, 
+              style={ [styles.questionBigText, styles[this.props.styleFormat + 'Question'], 
                   this.props.format == 'romaji' && styles.questionRomaji ] }
               >
                 { this.props.question[this.props.format] }

diff --git a/app/component/quiz.js b/app/component/quiz.js
@@ -20,6 +20,7 @@ class Quiz extends Component {
 
       this.currentAnswer = this.props.question;
       this.isFill = false;
+      this.extraChar = '';
 
       this.state = {
           selectedAnswer: '',
@@ -29,7 +30,7 @@ class Quiz extends Component {
   }
 
   _renderAnswerButtons(){
-    fill = ['audio_fill','english_fill'];
+    fill = ['audio_fill','english_fill','kanji_fill'];
     this.isFill = fill.indexOf(this.props.format) > -1;
 
     if(this.isFill){      
@@ -40,6 +41,7 @@ class Quiz extends Component {
                     textDisplay={ this.props.question[this.props.displayFormat] }
                     onSelectAnswer={ this.onFilled }
                     isCorrect={ this.checkFilled() }
+                    extraChar={ this.extraChar }
                     reset={ this.state.reset } 
                 />
             </View>

diff --git a/app/config/quiz.js b/app/config/quiz.js
@@ -56,6 +56,64 @@ let topic_title_vocab_kanji = [
   }
 ];
 
+
+let topic_title_vocab_kanji2 = [
+  {   
+      "id":"tp1_1",
+      "type":"vocabulary",  
+      "romaji":"onna",
+      "moji":"おんな",
+      "kanji":"女",
+      "english":"Woman",
+      "audio":"o.mp3"
+  },
+  {   
+      "id":"tp1_2",
+      "type":"vocabulary",      
+      "romaji":"chichi",
+      "moji":"ちち",
+      "kanji":"父",
+      "english":"Father",
+      "audio":"chi.mp3"
+  },
+  {   
+      "id":"tp1_3",
+      "type":"vocabulary",      
+      "romaji":"otoko",
+      "moji":"おとこ",
+      "kanji":"男",
+      "english":"Boy",
+      "audio":"o.mp3"
+  },
+  {   
+      "id":"tp1_4",
+      "type":"vocabulary",      
+      "romaji":"haha",
+      "moji":"はは",
+      "kanji":"母",
+      "english":"Mother",
+      "audio":"ha.mp3"
+  },
+  {   
+      "id":"tp1_5",
+      "type":"vocabulary",      
+      "romaji":"inu",
+      "moji":"いぬ",
+      "kanji":"犬",
+      "english":"Dog",
+      "audio":"i.mp3"
+  },
+  {   
+      "id":"tp1_6",
+      "type":"vocabulary",      
+      "romaji":"neko",
+      "moji":"ねこ",
+      "kanji":"猫",
+      "english":"Cat",
+      "audio":"ne.mp3"
+  }
+];
+
 export const quizItems = {
     "HIRAGANA_TITLE": [
         {
@@ -1845,6 +1903,7 @@ export const quizItems = {
             "audio":"ko.mp3"
         }
     ],
-    "TOPIC1_TITLE_and_vocabulary": topic_title_vocab_kanji
+    "TOPIC1_TITLE_and_vocabulary": topic_title_vocab_kanji,
+    "TOPIC1_TITLE_and_kanji": topic_title_vocab_kanji2
 };
 
diff --git a/app/config/studyList.js b/app/config/studyList.js
@@ -58,8 +58,9 @@ export const StudyList = [{
     kanji:{     
       random:true, 
       types:['kanji_moji','kanji_fill','kanji_english','audio_kanji','moji_kanji'],
+      //types:['kanji_fill'],
       withCorrection:true,
-      style:'quizLong'
+      style:'quizKanji'
     }
   },
   {

diff --git a/app/screens/Quiz/quizFlash.js b/app/screens/Quiz/quizFlash.js
@@ -282,7 +282,7 @@ import {
           currentItems[currentItems.length] = allArray[randomIndex].id;
           randomItem = allArray[randomIndex];
         }
-
+        
         array.answerOption[i] = randomItem;
       }
 
@@ -382,6 +382,44 @@ import {
 
           paramFormat.time = time * 1.5;
           break;
+
+        case 'kanji_fill':
+          paramFormat = {
+            answerFormat: 'moji',
+            questionFormat: 'kanji'
+          };
+
+          paramFormat.time = time * 1.5;
+          break;
+
+        case 'kanji_moji':
+          paramFormat = {
+            answerFormat: 'moji',
+            questionFormat: 'kanji'
+          };
+          break;
+
+        case 'kanji_english':
+          paramFormat = {
+            answerFormat: 'english',
+            questionFormat: 'kanji'
+          };
+          break;
+
+        case 'audio_kanji':
+          paramFormat = {
+            answerFormat: 'kanji',
+            questionFormat: 'audio'
+          };
+          break;
+
+        case 'moji_kanji':
+          paramFormat = {
+            answerFormat: 'kanji',
+            questionFormat: 'moji'
+          };
+          break;
+
 
         default:
           paramFormat = {

diff --git a/app/styles/style.js b/app/styles/style.js
@@ -412,22 +412,36 @@ module.exports = StyleSheet.create({
 			flexDirection:'row',
 		},
 		questionBigText:{
-			fontSize: 60,
+			fontSize:60,
 			color: primaryColor
 		},
 		questionInsText:{
-			fontSize: 36,
 			color:textColor
 		},
-		questionText:{
+		quizSquaredInstruction:{
+			fontSize:36,
+			flexDirection: 'column'
+		},
+		quizSquaredQuestion:{
+			fontSize:60,
 			flexDirection: 'column'
 		},
-		questionLongInstruction:{
+		quizLongInstruction:{
+			fontSize: 32,
+			width:'100%',
+			lineHeight:32
+		},
+		quizLongQuestion:{
+			fontSize: 38,
+			width:'100%',
+			lineHeight:40
+		},
+		quizKanjiInstruction:{
 			fontSize: 32,
 			width:'100%',
 			lineHeight:32
 		},
-		questionLong:{
+		quizKanjiQuestion:{
 			fontSize: 40,
 			width:'100%',
 			lineHeight:40
@@ -480,8 +494,12 @@ module.exports = StyleSheet.create({
 			zIndex:1
 		},
 		quizSquared:{
-			height:125,
-			width:125,
+			height:(window.width/2.5) - 10,
+			width:(window.width/2.5) - 10,
+		},
+		quizKanji:{
+			height:(window.width/2.5) - 10,
+			width:(window.width/2.5) - 10,
 		},
 		quizLong:{
 			padding:5,
@@ -501,6 +519,11 @@ module.exports = StyleSheet.create({
 			fontSize:30,
 			color:textColor
 		},
+		quizKanjiText:{
+			fontSize:35,
+			color:textColor,
+			textAlign: 'center'
+		},
 		quizBtnIconWrapper:{
 			width:50,
 			height:50,