@100mslive/react-native-room-kit 1.1.1 → 1.1.2

package/src/components/PollQuestion.tsx

@@ -1,16 +1,23 @@
 import * as React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-import { HMSPollQuestionType } from '@100mslive/react-native-hms';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+} from 'react-native';
+import { HMSPollQuestionType, HMSPollType } from '@100mslive/react-native-hms';
 import { useSelector } from 'react-redux';
 
 import { useHMSRoomStyleSheet } from '../hooks-util';
 import { BottomSheet } from './BottomSheet';
-import { AddIcon, ChevronIcon, TrashBinIcon } from '../Icons';
+import { AddIcon, CheckBoxIcon, ChevronIcon, TrashBinIcon } from '../Icons';
 import { HMSTextInput } from './HMSTextInput';
 import { HMSBaseButton } from './HMSBaseButton';
 import { PressableIcon } from './PressableIcon';
 import type { PollQuestionUI } from '../redux/actionTypes';
 import type { RootState } from '../redux';
+import { RadioInput } from './RadioInput';
 
 export interface PollQuestionProps {
   totalQuestions: number;
@@ -23,6 +30,11 @@ export interface PollQuestionProps {
     optionIndex: number,
     option: string
   ): void;
+  onSetPollQuestionCorrectOption(
+    questionIndex: number,
+    optionIndex: number,
+    correctOption: boolean
+  ): void;
   onQuestionFieldChange: <K extends keyof Omit<PollQuestionUI, 'options'>>(
     questionIndex: number,
     questionField: K,
@@ -61,6 +73,7 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
   onAddPollQuestionOption,
   onDeletePollQuestionOption,
   onEditPollQuestionOption,
+  onSetPollQuestionCorrectOption,
   onQuestionFieldChange,
   onDelete,
 }) => {
@@ -68,6 +81,9 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
   const launchingPoll = useSelector(
     (state: RootState) => state.polls.launchingPoll
   );
+  const pollType = useSelector(
+    (state: RootState) => state.polls.pollConfig.type
+  );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     container: {
@@ -122,12 +138,16 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
   }));
 
   const saveButtonDisabled =
-    !pollQuestion.title ||
+    // Disable save button if:
+    !pollQuestion.title || // title is not vaild, OR
+    !pollQuestion.pointWeightage || // pointWeightage is not valid, OR
     ((pollQuestion.type === HMSPollQuestionType.singleChoice ||
-      pollQuestion.type === HMSPollQuestionType.multipleChoice) &&
-      pollQuestion.options &&
-      (pollQuestion.options.length <= 1 ||
-        pollQuestion.options.some((option) => !option)));
+      pollQuestion.type === HMSPollQuestionType.multipleChoice) && // If question type is singleChoice or multipleChoice, AND
+      pollQuestion.options && // options are defined
+      (pollQuestion.options.length <= 1 || // options are less than or equal to 1, OR
+        pollQuestion.options.some((option) => !option[1]) || // some options are not valid, OR
+        (pollType === HMSPollType.quiz &&
+          pollQuestion.options.every((option) => !option[0])))); // If poll type is quiz, all options are marked as not correct
 
   if (pollQuestion.saved) {
     return (
@@ -148,14 +168,11 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
           <TouchableOpacity
             activeOpacity={0.8}
             onPress={() => setQuestionTypesVisible((prev) => !prev)}
-            style={[
-              {
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-              },
-              { marginBottom: 16 },
-            ]}
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+            }}
           >
             <Text style={[styles.normalText, hmsRoomStyles.regularHighText]}>
               {pollQuestion.title}
@@ -163,19 +180,26 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
             <ChevronIcon direction={questionTypesVisible ? 'top' : 'down'} />
           </TouchableOpacity>
         ) : (
+          <Text style={[styles.normalText, hmsRoomStyles.regularHighText]}>
+            {pollQuestion.title}
+          </Text>
+        )}
+
+        {pollType === HMSPollType.quiz ? (
           <Text
             style={[
-              styles.normalText,
-              hmsRoomStyles.regularHighText,
-              { marginBottom: 16 },
+              styles.smallerText,
+              hmsRoomStyles.regularMediumText,
+              { marginTop: 4 },
             ]}
           >
-            {pollQuestion.title}
+            {pollQuestion.pointWeightage}{' '}
+            {parseInt(pollQuestion.pointWeightage) <= 1 ? 'point' : 'points'}
           </Text>
-        )}
+        ) : null}
 
         {questionTypesVisible && pollQuestion.options ? (
-          <View style={{ marginBottom: 8 }}>
+          <View style={{ marginTop: 16 }}>
             {pollQuestion.options.map((option, idx) => (
               <Text
                 key={idx}
@@ -185,13 +209,13 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
                   hmsRoomStyles.regularMediumText,
                 ]}
               >
-                {option}
+                {option[1]}
               </Text>
             ))}
           </View>
         ) : null}
 
-        <View style={styles.saveContainer}>
+        <View style={[styles.saveContainer, { marginTop: 16 }]}>
           <PressableIcon
             disabled={launchingPoll}
             style={[styles.deleteIcon, launchingPoll ? { opacity: 0.4 } : null]}
@@ -230,6 +254,15 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
     );
   }
 
+  const InputComponent =
+    pollType === HMSPollType.quiz
+      ? pollQuestion.type === HMSPollQuestionType.singleChoice
+        ? RadioInput
+        : pollQuestion.type === HMSPollQuestionType.multipleChoice
+          ? CheckBoxIcon
+          : null
+      : null;
+
   return (
     <View style={[styles.container, hmsRoomStyles.container]}>
       <Text
@@ -361,10 +394,30 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
                     isFirst ? null : styles.topSpace,
                   ]}
                 >
+                  {!InputComponent ? null : (
+                    <View style={{ marginRight: 8 }}>
+                      <InputComponent
+                        selected={option[0]}
+                        type={option[0] ? 'checked' : 'unchecked'}
+                        onChange={(data) => {
+                          onSetPollQuestionCorrectOption(
+                            currentQuestionIndex,
+                            idx,
+                            data === 'checked'
+                              ? true
+                              : data === 'unchecked'
+                                ? false
+                                : data
+                          );
+                        }}
+                      />
+                    </View>
+                  )}
+
                   <HMSTextInput
                     placeholder={`Option ${idx + 1}`}
                     style={hmsRoomStyles.optionText}
-                    value={option}
+                    value={option[1]}
                     autoCapitalize="none"
                     autoCompleteType="off"
                     autoFocus={false}
@@ -405,6 +458,64 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
 
       <BottomSheet.Divider style={hmsRoomStyles.divider} />
 
+      {/* {[
+        {
+          id: 'skippable' as const,
+          label: 'Allow to skip',
+          enabled: pollQuestion.skippable,
+        },
+        {
+          id: 'responseEditable' as const,
+          label: 'Allow to vote again',
+          enabled: pollQuestion.responseEditable,
+        },
+      ].map((item) => {
+        return (
+          <SwitchRow
+            key={item.id}
+            text={item.label}
+            containerStyle={styles.config}
+            textStyle={[styles.smallText, hmsRoomStyles.regularMediumText]}
+            value={item.enabled}
+            onChange={(value) => {
+              onQuestionFieldChange(currentQuestionIndex, item.id, value);
+            }}
+          />
+        );
+      })} */}
+
+      {pollType === HMSPollType.quiz ? (
+        <View
+          style={{
+            marginBottom: 16,
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+          }}
+        >
+          <Text style={[styles.smallText, hmsRoomStyles.regularMediumText]}>
+            Point Weightage
+          </Text>
+
+          <HMSTextInput
+            placeholder=""
+            style={[hmsRoomStyles.optionText, { maxWidth: 88, marginLeft: 12 }]}
+            value={pollQuestion.pointWeightage}
+            autoFocus={false}
+            autoCapitalize="none"
+            autoCompleteType="off"
+            keyboardType={Platform.OS === 'android' ? 'numeric' : 'number-pad'}
+            onChangeText={(value) =>
+              onQuestionFieldChange(
+                currentQuestionIndex,
+                'pointWeightage',
+                value
+              )
+            }
+          />
+        </View>
+      ) : null}
+
       <View style={styles.saveContainer}>
         <PressableIcon
           style={styles.deleteIcon}
@@ -453,6 +564,10 @@ const styles = StyleSheet.create({
     lineHeight: 16,
     letterSpacing: 1.5,
   },
+  smallerText: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
   smallText: {
     fontSize: 14,
     lineHeight: 20,

package/src/components/PollQuestions.tsx

@@ -22,6 +22,8 @@ import {
   editPollQuestionOption,
   setLaunchingPoll,
   setPollQDeleteConfirmationVisible,
+  setPollQuestionCorrectOption,
+  setPollQuestionPointWeightage,
   setPollQuestionResponseEditable,
   setPollQuestionSaved,
   setPollQuestionSkippable,
@@ -29,7 +31,7 @@ import {
   setPollQuestionType,
   setSelectedPollQuestionIndex,
 } from '../redux/actions';
-import type { PollQuestionUI } from 'src/redux/actionTypes';
+import type { PollQuestionUI } from '../redux/actionTypes';
 
 export interface PollQuestionsProps {
   dismissModal(): void;
@@ -45,6 +47,9 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
   const launchingPoll = useSelector(
     (state: RootState) => state.polls.launchingPoll
   );
+  const pollType = useSelector(
+    (state: RootState) => state.polls.pollConfig.type
+  );
   const questions = useSelector((state: RootState) => state.polls.questions);
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
@@ -55,28 +60,12 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
   }));
 
   const disableLaunchPoll =
-    questions.length <= 0 ||
-    questions.some(
-      (question) =>
-        !question.title ||
-        !question.saved ||
-        (Array.isArray(question.options) &&
-          (question.options.length <= 1 ||
-            question.options.some((option) => !option)))
-    );
+    questions.length <= 0 || questions.some((question) => !question.saved);
 
   const launchPoll = async () => {
     try {
       const pollsData = reduxStore.getState().polls;
-
-      if (
-        !pollsData.pollName ||
-        pollsData.questions.some(
-          (question) =>
-            !question.title ||
-            (question.options && question.options.some((option) => !option))
-        )
-      ) {
+      if (!pollsData.pollName || disableLaunchPoll) {
         console.log('Incorrect data!');
         return;
       }
@@ -84,19 +73,32 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
 
       const result = await hmsInstance.interactivityCenter.startPoll({
         title: pollsData.pollName,
-        type: HMSPollType.poll,
+        type: pollType,
         rolesThatCanViewResponses:
-          pollsData.pollConfig.voteCountHidden && localPeerRole
+          pollType === HMSPollType.poll &&
+          pollsData.pollConfig.voteCountHidden &&
+          localPeerRole
             ? [localPeerRole]
             : undefined,
         // mode: HMSPollUserTrackingMode.customerUserID, // mode: null, // `pollsData.pollConfig.resultsAnonymous` Make results anonymous set user tracking mode to none
-        questions: pollsData.questions.map((question) => ({
-          skippable: question.skippable,
-          once: !question.responseEditable,
-          text: question.title,
-          type: question.type,
-          options: question.options?.map((option) => ({ text: option })),
-        })),
+        questions: pollsData.questions.map((question) => {
+          const weight = parseInt(question.pointWeightage);
+          return {
+            skippable: question.skippable,
+            once: !question.responseEditable,
+            text: question.title,
+            type: question.type,
+            weight:
+              pollType === HMSPollType.quiz && !isNaN(weight)
+                ? weight
+                : undefined,
+            options: question.options?.map((option) =>
+              pollType === HMSPollType.quiz
+                ? { text: option[1], isCorrectAnswer: option[0] }
+                : { text: option[1] }
+            ),
+          };
+        }),
       });
 
       console.log('quickStartPoll result > ', result);
@@ -144,6 +146,10 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
             setPollQuestionType(questionIndex, value as HMSPollQuestionType)
           );
           break;
+        case 'pointWeightage':
+          const cleanNumber = (value as string).replace(/[^0-9]/g, '');
+          dispatch(setPollQuestionPointWeightage(questionIndex, cleanNumber));
+          break;
       }
     },
     []
@@ -170,6 +176,15 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
     []
   );
 
+  const handleSetPollQuestionCorrectOption = React.useCallback(
+    (questionIndex: number, optionIndex: number, corectOption: boolean) => {
+      dispatch(
+        setPollQuestionCorrectOption(questionIndex, optionIndex, corectOption)
+      );
+    },
+    []
+  );
+
   return (
     <ScrollView
       style={styles.contentContainer}
@@ -188,6 +203,9 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
               onAddPollQuestionOption={handleAddPollQuestionOption}
               onDeletePollQuestionOption={handleDeletePollQuestionOption}
               onEditPollQuestionOption={handleEditPollQuestionOption}
+              onSetPollQuestionCorrectOption={
+                handleSetPollQuestionCorrectOption
+              }
               onQuestionFieldChange={onQuestionFieldChange}
               onDelete={deleteQuestion}
             />
@@ -215,7 +233,7 @@ export const PollQuestions: React.FC<PollQuestionsProps> = ({}) => {
 
       <HMSPrimaryButton
         disabled={disableLaunchPoll || launchingPoll}
-        title="Launch Poll"
+        title={`Launch ${pollType === HMSPollType.quiz ? 'Quiz' : 'Poll'}`}
         loading={launchingPoll}
         onPress={launchPoll}
         style={{ marginTop: 16, marginBottom: 56, alignSelf: 'flex-end' }}

package/src/components/PollsAndQuizzesModalContent.tsx

@@ -108,7 +108,7 @@ export const PollsAndQuizzesModalContent: React.FC<
               hmsRoomStyles.headerText,
             ]}
           >
-            {headerTitle ?? ('Polls' || 'Polls and Quizzes')}
+            {headerTitle ?? 'Polls and Quizzes'}
           </Text>
 
           {selectedPoll?.state ? (

package/src/components/PreviousPollsAndQuizzesList.tsx

@@ -50,7 +50,7 @@ export const PreviousPollsAndQuizzesList: React.FC<
             styles.emptyList,
           ]}
         >
-          No Polls to show
+          No Polls or Quizzes to show
         </Text>
       </View>
     );
@@ -60,7 +60,7 @@ export const PreviousPollsAndQuizzesList: React.FC<
     <View style={styles.contentContainer}>
       {pollsList.length > 0 && (
         <Text style={[styles.title, hmsRoomStyles.surfaceHighSemiBoldText]}>
-          Previous Polls
+          Previous Polls And Quizzes
         </Text>
       )}
 

package/src/components/QuizEndOptionsView.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import type { HMSPollQuestionOption } from '@100mslive/react-native-hms';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { CheckIcon } from '../Icons';
+
+interface QuizEndOptionsViewProps {
+  option: HMSPollQuestionOption;
+  isSelected: boolean;
+  isCorrect: boolean;
+}
+
+export const QuizEndOptionsView: React.FC<QuizEndOptionsViewProps> = ({
+  option,
+  isSelected,
+  isCorrect,
+}) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    surfaceHighRegularText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    surfaceMediumRegularText: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.textWrapper}>
+        {isCorrect ? <CheckIcon style={styles.icon} type="in-circle" /> : null}
+
+        <Text style={[styles.smallText, hmsRoomStyles.surfaceHighRegularText]}>
+          {option.text}
+        </Text>
+      </View>
+
+      {isSelected ? (
+        <Text
+          style={[styles.smallText, hmsRoomStyles.surfaceMediumRegularText]}
+        >
+          Your Answer
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  textWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    marginRight: 8,
+  },
+  smallText: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+});

package/src/components/RadioInput.tsx

@@ -1,17 +1,19 @@
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import type { ColorValue } from 'react-native';
 
 export interface RadioInputProps {
   selected: boolean;
   size?: number;
   color?: ColorValue;
+  onChange?: (selected: boolean) => void;
 }
 
 export const RadioInput: React.FC<RadioInputProps> = ({
   selected,
   size = 24,
   color = 'white',
+  onChange,
 }) => {
   const outerCircleStyle = {
     width: size,
@@ -28,11 +30,21 @@ export const RadioInput: React.FC<RadioInputProps> = ({
     backgroundColor: color,
   };
 
-  return (
+  const radio = (
     <View style={[styles.outerCircle, outerCircleStyle]}>
       {selected ? <View style={innerCircleStyle} /> : null}
     </View>
   );
+
+  if (typeof onChange !== 'function') {
+    return radio;
+  }
+
+  return (
+    <TouchableOpacity onPress={() => onChange(!selected)}>
+      {radio}
+    </TouchableOpacity>
+  );
 };
 
 const styles = StyleSheet.create({

package/src/components/RoomSettingsModalContent.tsx

@@ -316,7 +316,7 @@ export const RoomSettingsModalContent: React.FC<
             {
               id: 'polls-and-quizes',
               icon: <PollVoteIcon style={{ width: 20, height: 20 }} />,
-              label: 'Polls',
+              label: 'Polls and Quizzes',
               pressHandler: openPollsQuizzesModal,
               isActive: false,
               hide: !canReadOrWritePoll,

package/src/components/TilesContainer.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { View, Dimensions } from 'react-native';
+import { View } from 'react-native';
 import { useSelector } from 'react-redux';
 import type { ViewStyle } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 import type { HMSView } from '@100mslive/react-native-hms';
 
 import { Tile } from './Tile';
@@ -22,7 +22,7 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
   setHmsViewRefs,
   onPeerTileMorePress,
 }) => {
-  const { left, right } = useSafeAreaInsets();
+  const { width: safeWidth } = useSafeAreaFrame();
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
   const screenshareTilesAvailable = useSelector(
@@ -55,7 +55,7 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
               ? 'row'
               : 'column',
         },
-        { width: Dimensions.get('window').width + left + right },
+        { width: safeWidth },
       ]}
     >
       {peerTrackNodes.length <= 3 ? (

package/src/hooks-util.ts

@@ -24,8 +24,6 @@ import {
   WindowController,
   useHMSHLSPlayerCue,
   HMSPollUpdateType,
-  HMSPollType,
-  // useHMSPeerUpdates,
 } from '@100mslive/react-native-hms';
 import type { Chat as ChatConfig } from '@100mslive/types-prebuilt/elements/chat';
 import { SoftInputModes } from '@100mslive/react-native-hms';
@@ -2572,7 +2570,7 @@ export const useHLSCuedPolls = () => {
             ? store.getState().polls.polls[pollId]
             : null;
 
-        if (poll && poll.type === HMSPollType.poll) {
+        if (poll) {
           console.log('HLS Cued Poll ID: ', pollId);
           dispatch(addCuedPollId(poll.pollId));
           dispatch(

package/src/redux/actionTypes.ts

@@ -2,6 +2,7 @@ import type {
   HMSPoll,
   HMSPollQuestion,
   HMSPollQuestionType,
+  HMSPollType,
 } from '@100mslive/react-native-hms';
 
 const createRequests = (base: String) => {
@@ -197,6 +198,7 @@ export enum CreatePollStages {
 }
 
 export type PollConfig = {
+  type: HMSPollType;
   voteCountHidden: boolean;
   resultsAnonymous: boolean;
 };
@@ -206,7 +208,8 @@ export type PollQuestionUI = {
   title: string;
   skippable: boolean;
   responseEditable: boolean;
-  options?: string[];
+  pointWeightage: string;
+  options?: [boolean, string][];
   saved: boolean;
 };
 
@@ -220,9 +223,11 @@ export type PollsActionType =
   | SetSelectedQuestionIndexAction
   | SetQuestionTypeAction
   | SetQuestionTitleAction
+  | SetQuestionPointWeightageAction
   | AddQuestionOptionAction
   | DeleteQuestionOptionAction
   | EditQuestionOptionAction
+  | SetQuestionCorrectOptionAction
   | SetQuestionSkippable
   | SetQuestionResponseEditable
   | SetQuestionSavedAction
@@ -287,6 +292,12 @@ export type SetQuestionTitleAction = {
   title: string;
 };
 
+export type SetQuestionPointWeightageAction = {
+  type: PollsStateActionTypes.SET_POINT_WEIGHTAGE;
+  questionIndex: number;
+  pointWeightage: string;
+};
+
 export type AddQuestionOptionAction = {
   type: PollsStateActionTypes.ADD_QUESTION_OPTION;
   questionIndex: number;
@@ -305,6 +316,13 @@ export type EditQuestionOptionAction = {
   option: string;
 };
 
+export type SetQuestionCorrectOptionAction = {
+  type: PollsStateActionTypes.SET_QUESTION_CORRECT_OPTION;
+  questionIndex: number;
+  optionIndex: number;
+  correctOption: boolean;
+};
+
 export type SetQuestionSkippable = {
   type: PollsStateActionTypes.SET_QUESTION_SKIPPABLE;
   questionIndex: number;
@@ -384,9 +402,11 @@ export enum PollsStateActionTypes {
   SET_SELECTED_QUESTION_INDEX = 'SET_SELECTED_QUESTION_INDEX',
   SET_QUESTION_TYPE = 'SET_QUESTION_TYPE',
   SET_QUESTION_TITLE = 'SET_QUESTION_TITLE',
+  SET_POINT_WEIGHTAGE = 'SET_POINT_WEIGHTAGE',
   ADD_QUESTION_OPTION = 'ADD_QUESTION_OPTION',
   DELETE_QUESTION_OPTION = 'DELETE_QUESTION_OPTION',
   EDIT_QUESTION_OPTION = 'EDIT_QUESTION_OPTION',
+  SET_QUESTION_CORRECT_OPTION = 'SET_QUESTION_CORRECT_OPTION',
   SET_QUESTION_SKIPPABLE = 'SET_QUESTION_SKIPPABLE',
   SET_QUESTION_RES_EDITABLE = 'SET_QUESTION_RES_EDITABLE',
   SET_QUESTION_SAVED = 'SET_QUESTION_SAVED',