rollback228

Untitled

Nov 30th, 2020
397
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState, useEffect } from 'react';
  2. import MultiChoiceScreen from './Lessons/MultiChoices';
  3. import FillWordScreen from './Lessons/Fillwords';
  4. import Arrangement from './Lessons/Arrangement';
  5. import { View, Text, TouchableOpacity, Alert } from 'react-native';
  6. import { useSelector, useDispatch } from 'react-redux';
  7. import { QUESTION_TYPES } from '../../utils/constants';
  8. import _ from 'lodash';
  9. import styles from './styles';
  10. import ListFullOption from '../../components/ListFullOption';
  11. import Header from '../../components/Header';
  12. import { moderateScale, WIN_WIDTH } from '../../styles/common.variables';
  13.  
  14. export interface IProps {
  15.   // route?: any;
  16.   onPressFinish: any;
  17.   navigation: any;
  18. }
  19. const Screen: React.FC<IProps> = (props) => {
  20.   const { onPressFinish, navigation } = props;
  21.   const listQuestion = useSelector((state) => state.lessons.currQuestions);
  22.   const [idx, setIdx] = useState(0);
  23.   const [isShowResult, setIsShowResult] = useState(false);
  24.   const [rsQuiz, setRsQuiz] = useState(() => {
  25.     return listQuestion.map((item, index) => {
  26.       item.isChecking = index == 0 ? true : false;
  27.       return item;
  28.     });
  29.   });
  30.   React.useLayoutEffect(() => {
  31.     navigation.setOptions({
  32.       headerRight: () => (
  33.         <TouchableOpacity
  34.           style={styles.rightBtn}
  35.           onPress={() => {
  36.             onFinish();
  37.           }}>
  38.           <Text style={{ color: '#FFF', textAlign: 'center' }}>Nộp bài </Text>
  39.         </TouchableOpacity>
  40.       ),
  41.       headerLeft: () => (
  42.         <TouchableOpacity
  43.           style={{ marginLeft: moderateScale(15) }}
  44.           onPress={() => {
  45.             Alert.alert(
  46.               'Thông báo',
  47.               'Nếu bạn thoát sẽ mất hết dữ liệu làm bài, Bạn có muốn thoát ?',
  48.               [
  49.                 {
  50.                   text: 'Huỷ',
  51.                   onPress: () => {},
  52.                 },
  53.                 { text: 'Thoát', onPress: () => onPressFinish() },
  54.               ],
  55.             );
  56.           }}>
  57.           <Text
  58.             style={{
  59.               color: '#FFF',
  60.               textAlign: 'center',
  61.               fontSize: moderateScale(16),
  62.             }}>
  63.             Thoát
  64.           </Text>
  65.         </TouchableOpacity>
  66.       ),
  67.     });
  68.   }, [navigation]);
  69.   const onCheckAnswer = (itemAnswer: any) => {
  70.     const rs_tmp = rsQuiz.map((item, index) => {
  71.       if (idx == index) {
  72.         console.log('ook');
  73.       }
  74.       return {
  75.         ...item,
  76.         itemAnswer: idx == index ? itemAnswer : item.itemAnswer,
  77.         checked: idx == index ? true : item.checked,
  78.       };
  79.     });
  80.     setRsQuiz(rs_tmp);
  81.   };
  82.   console.log('rs_tmp rsQuiz', rsQuiz);
  83.   const showResult = (correct: number) => {
  84.     Alert.alert(
  85.       'Thông báo',
  86.       'Kết quả của bạn là ' + correct + '/' + listQuestion.length + ' câu đúng',
  87.       [
  88.         {
  89.           text: 'Thoát',
  90.           onPress: () => {
  91.             onPressFinish();
  92.           },
  93.         },
  94.         {
  95.           text: 'Xem đáp án ',
  96.           onPress: () => {
  97.             setIdx(0);
  98.             const rs_tmp = rsQuiz.map((item, index) => {
  99.               item.isChecking = index == 0;
  100.               return item;
  101.             });
  102.             setRsQuiz(rs_tmp);
  103.             setIsShowResult(true);
  104.           },
  105.         },
  106.       ],
  107.     );
  108.   };
  109.   const onFinish = () => {
  110.     const unCheckedArr = [];
  111.     let correct = 0;
  112.     rsQuiz.forEach((item, index) => {
  113.       if (!item.checked) unCheckedArr.push(index + 1);
  114.       if (item.itemAnswer && item.itemAnswer.isCorrect) correct++;
  115.     });
  116.     if (unCheckedArr.length > 0) {
  117.       Alert.alert(
  118.         'Thông báo',
  119.         'Bạn còn câu ' +
  120.           unCheckedArr.join(',') +
  121.           ' chưa trả lời.  Bạn có muốn nộp bài không ?',
  122.         [
  123.           {
  124.             text: 'Huỷ',
  125.             onPress: () => console.log('Ask me later pressed'),
  126.           },
  127.           {
  128.             text: 'Nộp bài',
  129.             onPress: () => showResult(correct),
  130.           },
  131.         ],
  132.       );
  133.     } else {
  134.       Alert.alert(
  135.         'Thông báo',
  136.         'Bạn có muốn kiểm tra lại bài tập trước khi nộp không ?',
  137.         [
  138.           {
  139.             text: 'Huỷ',
  140.             onPress: () => console.log('Ask me later pressed'),
  141.           },
  142.           {
  143.             text: 'Nộp bài',
  144.             onPress: () => showResult(correct),
  145.           },
  146.         ],
  147.       );
  148.     }
  149.     // setIsShowResult(true);
  150.   };
  151.   const onNext = (next: boolean) => {
  152.     let nextId = next ? idx + 1 : idx - 1;
  153.     if (nextId >= 0 && nextId <= listQuestion.length - 1) {
  154.       setIdx(nextId);
  155.     } else if (nextId == listQuestion.length && !isShowResult) {
  156.       onFinish();
  157.       //Alert.alert();
  158.     }
  159.     const rs_tmp = rsQuiz.map((item, index) => {
  160.       item.isChecking = index == nextId;
  161.       return { ...item };
  162.     });
  163.     setRsQuiz([...rs_tmp]);
  164.   };
  165.   const renderQuestion = () => {
  166.     switch (rsQuiz[idx].type) {
  167.       case QUESTION_TYPES.MULTI_CHOICE_QUESTION:
  168.         return (
  169.           <MultiChoiceScreen
  170.             question={rsQuiz[idx]}
  171.             onCheckAnswer={onCheckAnswer}
  172.             onNext={onNext}
  173.           />
  174.         );
  175.       case QUESTION_TYPES.FILL_WORD:
  176.         return (
  177.           <FillWordScreen
  178.             question={rsQuiz[idx]}
  179.             onCheckAnswer={onCheckAnswer}
  180.             onNext={onNext}
  181.           />
  182.         );
  183.       case QUESTION_TYPES.ARRANGE:
  184.         return (
  185.           <Arrangement
  186.             question={rsQuiz[idx]}
  187.             onCheckAnswer={onCheckAnswer}
  188.             onNext={onNext}
  189.           />
  190.         );
  191.     }
  192.   };
  193.  
  194.   const getAnswer = () => {
  195.     let ans = '';
  196.     switch (listQuestion[idx].type) {
  197.       case QUESTION_TYPES.MULTI_CHOICE_QUESTION:
  198.         ans = _.find(listQuestion[idx].answers, { isCorrect: true }).value;
  199.         break;
  200.       case QUESTION_TYPES.FILL_WORD:
  201.         //const arrAnswer = JSON.parse(listQuestion[idx].answers[0].value);
  202.         JSON.parse(listQuestion[idx].answers[0].value).forEach((el: any) => {
  203.           ans += el.value + ',';
  204.         });
  205.         //  ans = arr.join(', ');
  206.         break;
  207.       case QUESTION_TYPES.ARRANGE:
  208.         ans = JSON.parse(listQuestion[idx].answers[0].value)[0].value;
  209.         break;
  210.       default:
  211.         ans = '';
  212.     }
  213.     return ans;
  214.   };
  215.   const renderModalResult = () => {
  216.     return (
  217.       <View
  218.         style={[
  219.           styles.resultModal,
  220.           {
  221.             backgroundColor:
  222.               rsQuiz[idx].itemAnswer && rsQuiz[idx].itemAnswer.isCorrect
  223.                 ? 'green'
  224.                 : 'red',
  225.           },
  226.         ]}>
  227.         <View style={styles.resultWrapper}>
  228.           <Text style={styles.resultTxt}>
  229.             {rsQuiz[idx].itemAnswer && rsQuiz[idx].itemAnswer.isCorrect
  230.               ? 'Chính xác. Đáp án: !!!'
  231.               : 'Đáp án đúng:'}
  232.           </Text>
  233.         </View>
  234.         <View style={styles.explainWrapper}>
  235.           <Text style={styles.answerTxt}>{getAnswer()}</Text>
  236.           <Text style={[styles.answerTxt, { fontStyle: 'italic' }]}>
  237.             {listQuestion[idx].questionExplain}
  238.           </Text>
  239.         </View>
  240.       </View>
  241.     );
  242.   };
  243.   const onPressItem = (id: number) => {
  244.     setIdx(id);
  245.     const rs_tmp = rsQuiz.map((item, index) => {
  246.       item.isChecking = index == id;
  247.       return { ...item };
  248.     });
  249.     setRsQuiz(rs_tmp);
  250.   };
  251.   const renderSubItem = (
  252.     isFavorite: boolean,
  253.     item: any,
  254.     index: number,
  255.     onPress: any,
  256.   ) => {
  257.     return (
  258.       <TouchableOpacity
  259.         style={[
  260.           {
  261.             height: moderateScale(40),
  262.             width: moderateScale(40),
  263.             borderRadius: moderateScale(20),
  264.             margin: moderateScale(5),
  265.             justifyContent: 'center',
  266.             alignItems: 'center',
  267.             backgroundColor: item.isChecking ? 'green' : '#fff',
  268.           },
  269.         ]}
  270.         onPress={() => {
  271.           onPressItem(index);
  272.         }}>
  273.         <Text
  274.           style={{
  275.             color: item.isChecking ? '#fff' : item.checked ? 'green' : '#000',
  276.           }}>
  277.           {index + 1}
  278.         </Text>
  279.       </TouchableOpacity>
  280.     );
  281.   };
  282.   const renderQuestionList = () => {
  283.     console.log('renderQuestionList', rsQuiz);
  284.     return (
  285.       <ListFullOption
  286.         data={rsQuiz}
  287.         renderSubItem={renderSubItem}
  288.         style={[
  289.           {
  290.             alignItems: 'center',
  291.             alignContent: 'center',
  292.           },
  293.         ]}
  294.         scrollEnabled={true}
  295.         horizontal={true}
  296.       />
  297.     );
  298.   };
  299.   return (
  300.     <View style={{ flex: 1 }}>
  301.       {/* <Header title={'Bài kiểm tra'} /> */}
  302.       <View
  303.         style={{
  304.           height: moderateScale(70),
  305.           justifyContent: 'center',
  306.           alignItems: 'center',
  307.         }}>
  308.         {renderQuestionList()}
  309.       </View>
  310.       <View style={{ flex: 1 }}>{idx > -1 ? renderQuestion() : null}</View>
  311.       {isShowResult ? renderModalResult() : null}
  312.     </View>
  313.   );
  314. };
  315. export default Screen;
  316.  
RAW Paste Data