#50 fix problem with sound and add point indicator

ZendyLim · Jun 23, 2018 · 47b64f1 · 47b64f1
1 parent 44b02fa
commit 47b64f1
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 69 deletions.
diff --git a/app/actions/study.js b/app/actions/study.js
@@ -59,8 +59,7 @@ export function startLearnDispatch(studyType, startLearn, studyID, quizSize) {
   }
 }
 
-export function endLearnDispatch(studyType, json) {
-  console.log(studyType,'dadasd');
+export function endLearnDispatch(studyType, json) {  
   return {
      type: END_TIME_LEARN,
      endTime: studyType.endTime

diff --git a/app/component/question.js b/app/component/question.js
@@ -25,41 +25,31 @@ class QuestionPanel extends Component {
 
   constructor(props) {
       super(props);
-      this.currentAudio = this.props.question.id;
+      this.currentAudio = '';
       this.currentQuestion = '';
       this.imageSource = this.props.img ? ( ImageData[this.props.img] ) : ImageData.default_bg;
   }
 
-  componentWillMount() {
+  componentDidMount() {
     this.currentQuestion = this.props.question.id;
-    if(this.props.format == 'audio'){      
-      this.loadAudio();
-      setTimeout(() => {
-        this.playAudio(true)
-      }, 500);
+    if(this.props.format == 'audio'){    
+      this.loadAudio();      
     }
   }
 
   componentDidUpdate(){
     if(this.currentQuestion != this.props.question.id){
-
-      this.stopAudio();
-
+      this.stopAudio();          
       this.currentQuestion = this.props.question.id;
       if(this.props.format == 'audio'){        
         this.loadAudio();
-        this.props.questionReady(true);
-
+        this.props.questionReady(true);    
       }
       else{        
         this.props.questionReady(true);
       }      
 
     }
-
-    if(this.quizAudio){
-      this.quizAudio.stop();        
-    }
 
   }
 
@@ -78,6 +68,7 @@ class QuestionPanel extends Component {
     if(this.props.timesUp){
       return(
         <View style={[ styles.timesUp, styles.displayInlineContainer ]}>
+            <Icon name="clock-o" style={ [styles.timesUpText, styles.displayInline] }></Icon>
             <Text style={[ styles.timesUpText, styles.displayInline ]}>{ strings.TIMES_UP }</Text> 
         </View>
       );
@@ -91,7 +82,7 @@ class QuestionPanel extends Component {
     if(this.props.format == 'audio'){
       return(
         <View style={[ styles.questionContainer, styles.col12 ]}>
-          <TouchableHighlight onPress={() => this.playAudio(true) }>
+          <TouchableHighlight onPress={() => this.loadAudio(true) }>
               <Icon name="volume-up" style={ styles.questionBigText }></Icon>
           </TouchableHighlight>
         </View>
@@ -170,28 +161,29 @@ class QuestionPanel extends Component {
       );
     }
 
-    loadAudio(){
+    loadAudio(forcePlay = false){
+      this.stopAudio();
+
       this.quizAudio = new Sound(this.props.question.audio, Sound.MAIN_BUNDLE, (error) => {
         if (error) {          
           return;
         }        
-        this.playAudio();
+        this.playAudio(forcePlay);
 
       });
     }
 
     playAudio(forcePlay = false){
 
       playDifferentAudio = this.currentAudio != this.props.question.id && this.props.format == 'audio';
-
+      
       if(playDifferentAudio || forcePlay){    
-            
+
         this.currentAudio = this.props.question.id;        
         this.quizAudio.stop(() => {
           this.quizAudio.play((success) => {
-            if (!success) {              
-              //this.quizAudio.reset();
-            } 
+
+            // this.quizAudio.release();
           });
         });
 

diff --git a/app/component/timer.js b/app/component/timer.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Text, View, Animated, Dimensions} from 'react-native';
+import { Text, View, Animated, Dimensions, Easing} from 'react-native';
 import PropTypes from 'prop-types';
 
 var { width } = Dimensions.get('window');
@@ -23,6 +23,7 @@ class TimerBar extends Component {
 
       this.state = {
         progress: 0,
+        duration: this.props.time,
         start: true
       };   
 
@@ -78,11 +79,13 @@ class TimerBar extends Component {
     componentDidMount() {
 
       this.progress.addListener((progress) => {
+          let progressVal = parseFloat(this.seconds - ((progress.value * this.seconds) / 100 )).toFixed(2);
           this.setState({
-            progress: parseFloat(this.seconds - ((progress.value * this.seconds) / 100 )).toFixed(2) 
+            progress: progressVal,
+            duration:(progressVal * 1000)
           });
       });
-
+      
       this.timerStart();
 
     }
@@ -93,30 +96,33 @@ class TimerBar extends Component {
       this.timerResume();
     }
 
-    componentWillMount() {
+    componentWillUnmount() {
       this.progress.removeListener();
     }
 
-    timerStart(){
-      this.duration = this.props.time;
-      this.seconds = this.duration / 1000;
+    timerStart(resume = false){
 
+      if(!resume){
+        this.duration = this.props.time;
+        this.seconds = this.duration / 1000;
+      }
+
       Animated.timing(this.progress, {
         duration: this.duration,
-        toValue: 100
-      }).start(() => {
+        toValue: 100,
+        easing: Easing.linear
+      }).start(() => {        
           this.timerEnd();
       });
-
-
+
       this.props.onRestart(false);
     }
 
     timerEnd(){
 
       if(this.props.timerRun && this.state.progress == 0){
         if(!this.props.isTopicTest){           
-            this.props.onTimesUp(true);           
+            this.props.onTimesUp(true);         
         }
         else{
           this.props.onTestEnd(true);          
@@ -141,22 +147,24 @@ class TimerBar extends Component {
     }
 
     timerResume(){      
-      if(this.props.timerResume){        
-        this.timerStart();
+      if(this.props.timerResume){   
+        this.duration = this.state.duration;
+        this.timerStart(true);
       }
     }
 
     timerRestart(){
-      // if(this.props.timerRestart && !this.props.isTopicTest){   
-      //       this.progress.setValue(0);
-      //       this.timerStart();      
-      // }   
 
       if(this.props.timerRestart){
+
         if(!this.props.isTopicTest){
-          this.progress.setValue(0);            
-        }               
-        this.timerStart();
+          this.progress.setValue(0);  
+          this.timerStart();          
+        }
+        else{          
+          this.duration = this.state.duration;
+          this.timerStart(true);
+        }        
 
       }  
     }

diff --git a/app/screens/Quiz/quizFlash.js b/app/screens/Quiz/quizFlash.js
@@ -154,7 +154,7 @@ import {
         <View style={styles.container}>
           { this.state.question && this.state.question.id ? (
             <View style={[styles.row]}>
-
+              
               <QuestionPanel 
                   question={ this.state.question } 
                   format={ format } 
@@ -190,7 +190,12 @@ import {
                   (
                     <View>
                       <View style={ !timerRun && styles.blocker }></View>
-
+                      <View style={[ styles.quizInfo ]}>
+                        <Text style={ styles.quizInfoText }>
+                          Points: { this.setScore() }/100 Questions: { this.state.counter+1 }/{ this.allQuestion.length }
+                        </Text>
+                      </View>
+
                       <Quiz 
                         question={ this.state.question } 
                         answerOptions={ this.state.question.answerOption }
@@ -256,8 +261,7 @@ import {
 
       if(this.initialParams.idList && this.initialParams.idList.length){
         if(this.initialParams.formatType == 'FUKUSHU'){
-          this.setDefineFukushu(this.initialParams.idList);
-          //this.setListQuestion();
+          this.setDefineFukushu(this.initialParams.idList);          
         }
         else{
           this.setListQuestion();
@@ -833,22 +837,25 @@ import {
     };
 
     setEndQuiz = () =>  {
-      var endTime = ( new Date().getTime() / 1000);
-      var quizSizes = 0;
+      var endTime = ( new Date().getTime() / 1000);      
       var parseValue = this.reduxParam;
-
-      if(this.initialParams.isTopicTest){
-        quizSizes = this.allQuestion.length;
-      }  
-      score = Helper.countScore(this.studyRecord,quizSizes);
-      //console.log(this.studyRecord,this.allQuestion.length);
+
       parseValue['finishTime'] = endTime;
       parseValue['questions'] = this.studyRecord;
-      parseValue['score'] = score;
+      parseValue['score'] = this.setScore();
 
       this.props.endLearn(parseValue); //call our action
   };
 
+  setScore(){
+    var quizSizes = 0;
+
+    if(this.initialParams.isTopicTest){
+      quizSizes = this.allQuestion.length;
+    }  
+    return Helper.countScore(this.studyRecord,quizSizes);
+  }
+
     goNextQuestion() {            
 
           this.setNextQuestion();
@@ -859,18 +866,20 @@ import {
 
       if(this.initialParams.formatType == 'Quiz'){        
         this.setState({
-          showCorrect:true,          
+          showCorrect:true,   
+          expression:'sad',
+          timesUp:true    
         });             
-
+        
       }
       else{
         this.setState({
           timesUp: true,
           expression:'sad'
         });
 
-        setTimeout(() => {
-
+
+        setTimeout(() => {          
           this.setNextQuestion();
         }, this.state.pause); 
       }

diff --git a/app/screens/Study/hiraganaList.js b/app/screens/Study/hiraganaList.js
@@ -208,12 +208,12 @@ class HiraganaListScreen extends Component {
           <View style={[study.cardBox, study.borderBox, study.p3, styles.shadow]}>
             <Text style={[study.textLg, study.textBlack]}>{ strings['STUDY_QUIZ'] }</Text>
             <View style={study.buttonContainer}>
-              <TouchableOpacity style={study.button} onPress={this.navigateReview.bind(this, 'QUIZ')}>
+              <TouchableOpacity style={[study.button,study.mB20 ]} onPress={this.navigateReview.bind(this, 'QUIZ')}>
                 <Icon name='search'   color='#fff'/>
                 <Text style={[study.textWhite, study.textMd, study.mR10]} > { strings['STUDY_REVIEW'] }</Text>
               </TouchableOpacity>
             </View>
-            <Text style={[study.textLg, study.textCenter, study.textBold, study.textBlack]}>{ scoreQuiz }</Text>
+            {/* <Text style={[study.textLg, study.textCenter, study.textBold, study.textBlack]}>{ scoreQuiz }</Text> */}
             <View style={study.buttonContainer}>
               <TouchableOpacity style={[study.button, study.mR10]}  onPress={this.navigateToLearn.bind(this, 'Quiz')}>
                 <Icon name='play-arrow'   color='#fff'/>

diff --git a/app/styles/study.js b/app/styles/study.js
@@ -125,6 +125,13 @@ module.exports = StyleSheet.create({
     marginRight: 10, 
   }, 
 
+  mB10: {
+    marginBottom: 10, 
+  },
+  mB20: {
+    marginBottom: 20, 
+  }, 
+
   textBlack: {
     color: 'black',
   }, 

diff --git a/app/styles/style.js b/app/styles/style.js
@@ -403,6 +403,18 @@ module.exports = StyleSheet.create({
 			position:'absolute'
 		},
 		// Question Panel
+		quizInfo:{
+			//position:"absolute",
+			right:0,
+			top:0,
+			zIndex:10,
+			padding:5,
+			backgroundColor:"rgba(255,255,255,0.8)"
+		},
+		quizInfoText:{
+			fontSize:16,
+			textAlign:"right"
+		},
 		questionWrapper: {
 			padding:10,
 			flex: 1,
@@ -522,7 +534,9 @@ module.exports = StyleSheet.create({
 		timesUpText:{
 			color:'#fff',
 			flexDirection:'column',
-			fontSize:36
+			fontSize:36,
+			marginLeft:5,
+			marginRight:5
 		},
 		quizBtnContainer:{
 			position:'relative'
@@ -628,13 +642,13 @@ module.exports = StyleSheet.create({
 			color:textSecondary
 		},
 		blocker:{
-			position:'absolute',
+			position:'absolute',			
 			width:'100%',
 			height:'100%',
 			left:0,
 			top:0,
 			elevation:10,
-			zIndex:10
+			zIndex:99
 		},
 		absoluteScreen : {
 			position: 'absolute',