@nakamura-123/pages 0.1.21 → 0.1.23

package/dist/quiz/QuizContentsJLPT.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var Guide_1 = __importDefault(require("../component/Guide"));
+var PageContainerWrap_1 = __importDefault(require("./common/PageContainerWrap"));
+var JQuestion_1 = __importDefault(require("./jQuestion/JQuestion"));
+var JAnswer_1 = __importDefault(require("./jAnswer/JAnswer"));
+var QuizContentDrill = function (_a) {
+    var navigation = _a.navigation, guideName = _a.guideName, showSwipe1Guide = _a.showSwipe1Guide, showSwipe2Guide = _a.showSwipe2Guide, isCheck = _a.isCheck, isResult = _a.isResult, isNotInput = _a.isNotInput, isNotQuiz = _a.isNotQuiz, isInputQuizMode = _a.isInputQuizMode, turn = _a.turn;
+    return (<PageContainerWrap_1.default scrollViewRef={null} navigation={navigation}>
+      <Guide_1.default name={guideName} isVisible={showSwipe1Guide || showSwipe2Guide}>
+        <react_native_1.View></react_native_1.View>
+      </Guide_1.default>
+      <react_native_1.View style={styles.container}>
+        <JQuestion_1.default navigation={navigation}/>
+        <JAnswer_1.default navigation={navigation}/>
+      </react_native_1.View>
+      <></>
+    </PageContainerWrap_1.default>);
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: "space-between",
+    },
+});
+exports.default = QuizContentDrill;

package/dist/quiz/Title.js

@@ -12,9 +12,11 @@ var quizHook_1 = require("../hooks/quizHook");
 var QuizTitle = function () {
     var _a;
     var turn = (0, react_redux_1.useSelector)(function (state) { return state.quiz.currentInfo.state.turn; });
-    var question = (0, quizHook_1.useQuestionData)();
+    var question = (0, quizHook_1.useQuestionDataD)();
     var allQuizCnt = (0, react_redux_1.useSelector)(function (state) { return state.quiz.quizList.length; });
     var isShowTag = (0, react_redux_1.useSelector)(function (state) { return state.quizCfg.inQuizOption.isShowTag; });
+    if (!question)
+        return null;
     var title = question.title;
     var cntText = "".concat(turn + 1, " / ").concat(allQuizCnt, "\u554F\u76EE");
     var tagColor = ((_a = lib_1.tagLevels.find(function (tag) { return tag.level === question.tag; })) === null || _a === void 0 ? void 0 : _a.color) || "ltBlack";

package/dist/quiz/answer/Answer.js

@@ -8,7 +8,6 @@ var react_native_1 = require("react-native");
 var types_1 = require("@nakamura-123/types");
 var NormalChoice_1 = __importDefault(require("./NormalChoice"));
 var quizHook_1 = require("../../hooks/quizHook");
-var qGardType_1 = require("@nakamura-123/types/dist/gard/qGardType");
 var MultiChoice_1 = __importDefault(require("./MultiChoice"));
 var MultiNextBtn_1 = __importDefault(require("./MultiNextBtn"));
 var quizHook_2 = require("../../hooks/quizHook");
@@ -17,23 +16,25 @@ var BlankBtn_1 = __importDefault(require("./BlankBtn"));
 var InputNav_1 = __importDefault(require("./InputNav"));
 var isDQInStoreNormal = types_1.qGard.isDQInStoreNormal;
 var Answer = function (_a) {
-    var question = (0, quizHook_1.useQuestionData)();
+    var question = (0, quizHook_1.useQuestionDataD)();
+    if (!question)
+        return null;
     var mode = (0, quizHook_2.useGetMode)();
     return (<react_native_1.View style={styles.container}>
       {/* 1.ノーマルモード */}
-      {isDQInStoreNormal(question) && <NormalChoice_1.default question={question}/>}
+      {types_1.qGard.isDQInStoreNormal(question) && (<NormalChoice_1.default question={question}/>)}
       {/* 2.Multiモード */}
-      {(0, qGardType_1.isDQInStoreMulti)(question) && mode === "quiz" && (<>
+      {types_1.qGard.isDQInStoreMulti(question) && mode === "quiz" && (<>
           <MultiChoice_1.default question={question}/>
           <MultiNextBtn_1.default question={question}/>
         </>)}
       {/* 3.穴埋めモード */}
-      {(0, qGardType_1.isDQInStoreBlank)(question) && mode === "quiz" && (<>
+      {types_1.qGard.isDQInStoreBlank(question) && mode === "quiz" && (<>
           <BlankAnswer_1.default question={question}/>
           <BlankBtn_1.default />
         </>)}
       {/* 4.記述モード */}
-      {(0, qGardType_1.isDQInStoreInput)(question) && <InputNav_1.default question={question}/>}
+      {types_1.qGard.isDQInStoreInput(question) && <InputNav_1.default question={question}/>}
     </react_native_1.View>);
 };
 var styles = react_native_1.StyleSheet.create({

package/dist/quiz/answer/BlankBtn.js

@@ -10,9 +10,14 @@ var quizActionHook_1 = require("../../hooks/quizActionHook");
 var lib_1 = require("@nakamura-123/lib");
 var BlankBtn = function () {
     var useHandleCheck = (0, quizActionHook_1.useChangeModeToCheck)();
+    var handleCheck = function (isCorrect) {
+        if (!useHandleCheck)
+            return;
+        useHandleCheck(isCorrect);
+    };
     return (<react_native_1.View style={styles.container}>
-      <CheckButton text="不正解" iconName="times" backgroundColor={lib_1.colors.blue} onPress={function () { return useHandleCheck(false); }}/>
-      <CheckButton text="正解" iconName="check" backgroundColor={lib_1.colors.red} onPress={function () { return useHandleCheck(true); }}/>
+      <CheckButton text="不正解" iconName="times" backgroundColor={lib_1.colors.blue} onPress={function () { return handleCheck(false); }}/>
+      <CheckButton text="正解" iconName="check" backgroundColor={lib_1.colors.red} onPress={function () { return handleCheck(true); }}/>
     </react_native_1.View>);
 };
 var CheckButton = function (_a) {

package/dist/quiz/answer/Input/InputAnswerBtn.js

@@ -26,7 +26,7 @@ var InputAnswerBtn = function () {
         { text: "正　解", color: "red", icon: "check", isCheck: true },
     ];
     return (<react_native_1.View style={styles.container}>
-      {buttons.map(function (btn, index) { return (<react_native_1.TouchableOpacity key={index} style={__assign(__assign({}, styles.btn), { backgroundColor: lib_1.colors[btn.color] })} onPress={function () { return useHandleCheck(btn.isCheck); }} activeOpacity={0.7}>
+      {buttons.map(function (btn, index) { return (<react_native_1.TouchableOpacity key={index} style={__assign(__assign({}, styles.btn), { backgroundColor: lib_1.colors[btn.color] })} onPress={function () { return useHandleCheck && useHandleCheck(btn.isCheck); }} activeOpacity={0.7}>
           <common_1.IconInCircle name={btn.icon} circleColor="white" iconColor={btn.color} size={13} cStyle={styles.icon}/>
           <common_1.MyText weight={700} color="white">
             {btn.text}

package/dist/quiz/answer/MultiChoice.js

@@ -45,6 +45,8 @@ var MultiChoice = function (_a) {
         if (!isLastTurn(mTurn, multiSel))
             return;
         var isCorrectedQuiz = newMCorrects.every(function (c) { return c; });
+        if (!useHandleCheck)
+            return;
         useHandleCheck(isCorrectedQuiz, false);
     };
     // ChoiceViewに必要なロジックを作成(normalとほぼ共通)

package/dist/quiz/answer/NormalChoice.js

@@ -43,7 +43,7 @@ var NormalChoice = function (_a) {
         // 選択肢を選択(複数答えがあるときは全て)選んだ場合、checkモードへ移行する際の処理
         var isCorrected = newSelectedIndexes.every(function (index) { var _a; return (_a = choices[index]) === null || _a === void 0 ? void 0 : _a.isCorrect; });
         // 共通処理
-        useHandleCheck(isCorrected);
+        useHandleCheck && useHandleCheck(isCorrected);
     };
     // 選択肢のアウトラインの色を決める
     var wordAndColors = choices.map(function (_a, i) {

package/dist/quiz/check/NextQuizBtn.js

@@ -18,6 +18,7 @@ var NextQuiz = function (_a) {
     var _b = (0, react_redux_1.useSelector)(function (state) { return state.quiz.currentInfo.state; }), turn = _b.turn, activeTurn = _b.activeTurn, mode = _b.mode;
     var isResult = mode === "result";
     var isActiveTurn = turn === activeTurn;
+    // 画面遷移のための関数を定義
     // 2つのボタンを定義
     var btnInfo = {
         next: { icon: "gesture-swipe-left", text: "次へ" },

package/dist/quiz/check/SelectTag.js

@@ -23,20 +23,36 @@ var common_1 = require("@nakamura-123/common");
 var quizHook_1 = require("../../hooks/quizHook");
 var db_1 = require("@nakamura-123/db");
 var react_i18next_1 = require("react-i18next");
+var react_redux_2 = require("react-redux");
 var changeTagLevel = db_1.TagModel.changeTagLevel;
 var SelectTag = function () {
     var realm = (0, react_2.useRealm)();
     var dispatch = (0, react_redux_1.useDispatch)();
     var t = (0, react_i18next_1.useTranslation)().t;
-    var question = (0, quizHook_1.useQuestionData)();
-    var tagInfos = getTagInfos(lib_1.tagLevels, question.tag);
-    var tagId = question
-        ? (0, quizHook_1.useTagIdByYearNum)(question.yearId, question.num)
-        : null;
+    var selected = (0, react_redux_2.useSelector)(function (state) { return state.quiz.selected; });
+    var selectedSystem = selected.system || "drill";
+    var tagInfos = null;
+    var tagId = null;
+    if (selectedSystem === "JlptBasic" || selectedSystem === "JlptListen") {
+        var question = (0, quizHook_1.useQuestionDataJ)();
+        if (!question)
+            return null;
+        tagInfos = getTagInfos(lib_1.tagLevels, question.tag);
+        tagId = (0, quizHook_1.useTagIdJ)(question.quizId, selected.tagName);
+    }
+    else {
+        var question = (0, quizHook_1.useQuestionDataD)();
+        if (!question)
+            return null;
+        tagInfos = getTagInfos(lib_1.tagLevels, question.tag);
+        tagId = (0, quizHook_1.useTagIdByYearNum)(question.yearId, question.num);
+    }
     var onPress = function (level) {
         if (tagId)
             dispatch(changeTagLevel({ realm: realm, tagId: tagId, level: level }));
     };
+    if (!tagInfos)
+        return null;
     return (<react_native_1.View style={styles.container}>
       {tagInfos.map(function (_a, i) {
             var circleColor = _a.circleColor, iconColor = _a.iconColor, textColor = _a.textColor, level = _a.level;

package/dist/quiz/common/MyTextqqyy.js

@@ -109,8 +109,7 @@ var renderText = function (item, onSearch, fsize, fWeight, dispatch) {
 };
 var styles = react_native_1.StyleSheet.create({
     p: {
-        marginVertical: 5,
-        marginHorizontal: 5,
+        margin: 5,
     },
     searchText: {
         // color: colors.blue,

package/dist/quiz/common/PageContainerWrap.d.ts

@@ -3,7 +3,7 @@ import { StackNavigationProp } from "@react-navigation/stack";
 import { Nav } from "@nakamura-123/types";
 interface PageContainerProps {
     navigation: StackNavigationProp<Nav.RootStackParamList>;
-    scrollViewRef: React.RefObject<any>;
+    scrollViewRef: React.RefObject<any> | null;
     children: React.ReactNode;
 }
 declare const PageContainerWrap: React.FC<PageContainerProps>;

package/dist/quiz/common/RenderImgOrText.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { StackNavigationProp } from "@react-navigation/stack";
 import { Nav } from "@nakamura-123/types";
-interface RenderChoiceProps {
+interface Props {
     word: string;
-    imgKey: string;
+    imgKey?: string;
     navigation?: StackNavigationProp<Nav.RootStackParamList>;
     isNotSearch?: boolean;
     selectable?: boolean;
 }
-declare const RenderChoice: React.FC<RenderChoiceProps>;
-export default RenderChoice;
+declare const RenderImgOrText: React.FC<Props>;
+export default RenderImgOrText;

package/dist/quiz/common/RenderImgOrText.js

@@ -9,15 +9,19 @@ var lib_1 = require("@nakamura-123/lib");
 var MyTextqqyy_1 = __importDefault(require("./MyTextqqyy"));
 var common_1 = require("@nakamura-123/common");
 var ZoomableImage_1 = __importDefault(require("./ZoomableImage"));
-var RenderChoice = function (_a) {
-    var word = _a.word, imgKey = _a.imgKey, navigation = _a.navigation, isNotSearch = _a.isNotSearch, selectable = _a.selectable;
+var RubyText_1 = __importDefault(require("./RubyText"));
+var RenderImgOrText = function (_a) {
+    var word = _a.word, _b = _a.imgKey, imgKey = _b === void 0 ? null : _b, navigation = _a.navigation, isNotSearch = _a.isNotSearch, selectable = _a.selectable;
     var qImgs = (0, react_redux_1.useSelector)(function (state) { return state.app.imgs.qImgs; });
+    var regex = /\)ff\(/;
     if (typeof word === "string" && /^\//.test(word)) {
         var path = lib_1.utilFnc.getImgPathFromWord(qImgs, imgKey, word);
         return navigation ? (<ZoomableImage_1.default path={path} navigation={navigation}/>) : (<common_1.MyImage path={path}/>);
     }
+    else if (regex.test(word))
+        return <RubyText_1.default>{word}</RubyText_1.default>;
     return (<MyTextqqyy_1.default isNotSearch={isNotSearch} selectable={selectable}>
       {word}
     </MyTextqqyy_1.default>);
 };
-exports.default = RenderChoice;
+exports.default = RenderImgOrText;

package/dist/quiz/common/RubyText.d.ts

@@ -1,6 +1,11 @@
 import React from "react";
+import { ViewStyle } from "react-native";
+import { FontSize } from "@nakamura-123/lib";
 interface RubyTextProps {
-    text: string;
+    children: string;
+    cStyle?: ViewStyle;
+    fsize?: FontSize;
+    isNoWrap?: boolean;
 }
 declare const RubyText: React.FC<RubyTextProps>;
 export default RubyText;

package/dist/quiz/common/RubyText.js

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,58 +17,66 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
 var MyTextqqyy_1 = __importDefault(require("./MyTextqqyy"));
-var parseRubyText = function (text) {
-    var regex = /\(([^)]+)\)ff\(([^)]+)\)/g; // [] → () に変更
-    var match;
-    var parts = [];
-    var lastIndex = 0;
-    while ((match = regex.exec(text)) !== null) {
-        // () の前のテキストを追加
-        if (match.index > lastIndex) {
-            parts.push({ base: text.slice(lastIndex, match.index) });
-        }
-        // ルビ付きの部分を追加
-        parts.push({ base: match[1], ruby: match[2] });
-        lastIndex = regex.lastIndex;
-    }
-    // 残りのテキストを追加
-    if (lastIndex < text.length) {
-        parts.push({ base: text.slice(lastIndex) });
-    }
-    return parts;
-};
+var react_redux_1 = require("react-redux");
+var lib_1 = require("@nakamura-123/lib");
 var RubyText = function (_a) {
-    var text = _a.text;
-    var parsedText = parseRubyText(text);
-    return (<react_native_1.Text style={styles.container}>
+    var fsize = _a.fsize, cStyle = _a.cStyle, isNoWrap = _a.isNoWrap, children = _a.children;
+    var parsedText = lib_1.utilFnc.parseRubyText(children);
+    var fontSize = (0, react_redux_1.useSelector)(function (state) { return state.quizCfg.inQuizOption.fsize; });
+    // const nextSize = getNextFontSize(fontSize);
+    fontSize = fsize || fontSize;
+    // const marginBottom = fontSize === "xxl" ? 0 : -5;
+    var flexWrap = isNoWrap ? "nowrap" : "wrap";
+    var _b = getLineHeight(fontSize), bHeight = _b.bHeight, oHeight = _b.oHeight;
+    return (<react_native_1.View style={__assign(__assign({}, styles.lineWrap), { flexWrap: flexWrap })}>
       {parsedText.map(function (part, index) {
-            return part.ruby ? (<react_native_1.View key={index} style={styles.rubyContainer}>
-            <react_native_1.Text style={styles.ruby}>{part.ruby}</react_native_1.Text>
-            <MyTextqqyy_1.default style={styles.base}>{part.base}</MyTextqqyy_1.default>
-          </react_native_1.View>) : (<react_native_1.Text key={index} style={styles.base}>
+            return part.ruby ? (<react_native_1.Text key={index} style={__assign(__assign({}, styles.rubyWrapper), cStyle)}>
+            <MyTextqqyy_1.default style={__assign({}, styles.ruby)} fsize="xs">
+              {part.ruby}
+            </MyTextqqyy_1.default>
+            {"\n"}
+            <MyTextqqyy_1.default style={__assign(__assign({}, styles.base), { lineHeight: bHeight })} fsize={fontSize}>
+              {part.base}
+            </MyTextqqyy_1.default>
+          </react_native_1.Text>) : (<MyTextqqyy_1.default key={index} style={__assign(__assign({}, styles.onlyBase), { lineHeight: oHeight })} fsize={fontSize}>
             {part.base}
-          </react_native_1.Text>);
+          </MyTextqqyy_1.default>);
         })}
-    </react_native_1.Text>);
+    </react_native_1.View>);
+};
+// LineHeightを算出し、返す
+var getLineHeight = function (fontSize) {
+    var lineHeightMap = {
+        xxxl: { bHeight: 28, oHeight: 42 },
+        xxl: { bHeight: 24, oHeight: 39 },
+        xl: { bHeight: 20, oHeight: 36 },
+        lg: { bHeight: 18, oHeight: 34 },
+        md: { bHeight: 16, oHeight: 34 },
+        sm: { bHeight: 14, oHeight: 33 },
+        xs: { bHeight: 11, oHeight: 32 },
+    };
+    return lineHeightMap[fontSize];
 };
 var styles = react_native_1.StyleSheet.create({
-    container: {
+    lineWrap: {
         flexDirection: "row",
-        flexWrap: "wrap",
     },
-    rubyContainer: {
-        alignItems: "center",
-        marginBottom: -10,
+    rubyWrapper: {
+        lineHeight: 30,
+        marginHorizontal: 1,
     },
     ruby: {
-        fontSize: 10,
-        lineHeight: 10,
+        lineHeight: 12,
         textAlign: "center",
-        marginBottom: -15,
+        color: "#555",
     },
     base: {
-        fontSize: 16,
-        lineHeight: 30,
+        lineHeight: 20,
+        textAlign: "center",
+    },
+    onlyBase: {
+        lineHeight: 35,
+        margin: 0,
     },
 });
 exports.default = RubyText;

package/dist/quiz/common/ZoomableImage.d.ts

@@ -4,6 +4,7 @@ import { Nav } from "@nakamura-123/types";
 interface ZoomableImageProps {
     navigation: StackNavigationProp<Nav.RootStackParamList>;
     path: number;
+    maxHeightValue?: number;
 }
 declare const ZoomableImage: React.FC<ZoomableImageProps>;
 export default ZoomableImage;

package/dist/quiz/common/ZoomableImage.js

@@ -7,12 +7,12 @@ var react_1 = __importDefault(require("react"));
 var react_native_1 = require("react-native");
 var common_1 = require("@nakamura-123/common");
 var ZoomableImage = function (_a) {
-    var navigation = _a.navigation, path = _a.path;
+    var navigation = _a.navigation, path = _a.path, maxHeightValue = _a.maxHeightValue;
     var handleImgPress = function (path) {
         return navigation === null || navigation === void 0 ? void 0 : navigation.navigate("ImgZoom", { path: path });
     };
     return (<react_native_1.TouchableOpacity onPress={function () { return handleImgPress(path); }} activeOpacity={0.7}>
-      <common_1.MyImage path={path}/>
+      <common_1.MyImage path={path} maxHeightValue={maxHeightValue}/>
     </react_native_1.TouchableOpacity>);
 };
 exports.default = ZoomableImage;

package/dist/quiz/explain/Explain.js

@@ -15,9 +15,11 @@ var ZoomableImage_1 = __importDefault(require("../common/ZoomableImage"));
 var MyTextqqyy_1 = __importDefault(require("../common/MyTextqqyy"));
 var Explain = function (_a) {
     var navigation = _a.navigation;
-    var question = (0, quizHook_1.useQuestionData)();
+    var question = (0, quizHook_1.useQuestionDataD)();
     var rImgs = (0, react_redux_1.useSelector)(function (state) { return state.app.imgs.rImgs; });
     var mImgs = (0, react_redux_1.useSelector)(function (state) { return state.app.imgs.mImgs; });
+    if (!question)
+        return null;
     var yearId = question.yearId, explain = question.explain;
     if (!explain)
         return null;
@@ -54,7 +56,7 @@ var Explain = function (_a) {
             }
             if (I.viewType === "rImg") {
                 var path = lib_1.utilFnc.getrImgPath(rImgs, I.word);
-                return (<ZoomableImage_1.default key={index} path={path} navigation={navigation}/>);
+                return (<ZoomableImage_1.default key={index} path={path} navigation={navigation} maxHeightValue={1000}/>);
             }
             if (I.viewType === "mImg") {
                 var pathes = lib_1.utilFnc.getmImgPathes(mImgs, I.yearId, I.num);

package/dist/quiz/jAnswer/JAnswer.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { StackNavigationProp } from "@react-navigation/stack";
+import { Nav } from "@nakamura-123/types";
+type Prop = {
+    navigation: StackNavigationProp<Nav.RootStackParamList>;
+};
+declare const JAnswer: React.FC<Prop>;
+export default JAnswer;

package/dist/quiz/jAnswer/JAnswer.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var stores_1 = require("@nakamura-123/stores");
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var react_redux_1 = require("react-redux");
+var quizHook_1 = require("../../hooks/quizHook");
+var JAnswerContents_1 = __importDefault(require("./JAnswerContents"));
+var react_redux_2 = require("react-redux");
+var quizActionHook_1 = require("../../hooks/quizActionHook");
+var getChoiceStyle_1 = require("../answer/styles/getChoiceStyle");
+var JAnswer = function (_a) {
+    var navigation = _a.navigation;
+    var dispatch = (0, react_redux_2.useDispatch)();
+    var question = (0, quizHook_1.useQuestionDataJ)();
+    var selectedIndexes = (question === null || question === void 0 ? void 0 : question.selectedIndexes) || [];
+    var choices = (question === null || question === void 0 ? void 0 : question.choices) || [];
+    var form = question === null || question === void 0 ? void 0 : question.form;
+    var useHandleCheck = (0, quizActionHook_1.useChangeModeToCheck)("JLPT", question);
+    var isDoublePress = (0, react_redux_1.useSelector)(function (state) { return state.quizCfg.inQuizOption; }).isDoublePress;
+    var mode = (0, quizHook_1.useGetMode)();
+    // 選択肢を選んだ時の処理
+    var handleChoice = function (i) {
+        var _a;
+        if (mode !== "quiz")
+            return;
+        dispatch(stores_1.quizAction.replaceSelectedIndex([i]));
+        var isCorrected = (_a = choices[i]) === null || _a === void 0 ? void 0 : _a.isCorrect;
+        // 共通処理
+        useHandleCheck && useHandleCheck(isCorrected);
+    };
+    // 選択肢のアウトラインの色を決める
+    var wordAndColors = choices.map(function (_a, i) {
+        var choice = _a.choice, isCorrect = _a.isCorrect;
+        if (form === "basicSelImg" || form === "listenSelImg")
+            choice = "/".concat(choice);
+        return {
+            word: choice,
+            color: (0, getChoiceStyle_1.getChoiceOutlineColor)(selectedIndexes, mode, isCorrect, i),
+        };
+    });
+    // imgだった場合、表示させるためのTopKey
+    return (<JAnswerContents_1.default wordAndColors={wordAndColors} isDoublePress={isDoublePress} handleChoice={handleChoice} isNotSearch={false} navigation={navigation}/>);
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        backgroundColor: "#fff",
+    },
+    text: {
+        fontSize: 18,
+        color: "#333",
+    },
+});
+exports.default = JAnswer;

package/dist/quiz/jAnswer/JAnswerContents.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ColorKeys } from "@nakamura-123/lib";
+import { Nav } from "@nakamura-123/types";
+import { StackNavigationProp } from "@react-navigation/stack";
+type Prop = {
+    wordAndColors: {
+        word: string;
+        color: ColorKeys;
+    }[];
+    isDoublePress: boolean;
+    handleChoice: (index: number) => void;
+    isNotSearch?: boolean;
+    navigation: StackNavigationProp<Nav.RootStackParamList>;
+};
+declare const JAnswerContents: React.FC<Prop>;
+export default JAnswerContents;

package/dist/quiz/jAnswer/JAnswerContents.js

@@ -0,0 +1,82 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var common_1 = require("@nakamura-123/common");
+var react_1 = __importDefault(require("react"));
+var react_native_1 = require("react-native");
+var RenderImgOrText_1 = __importDefault(require("../common/RenderImgOrText"));
+var lib_1 = require("@nakamura-123/lib");
+var RepeatBtn_1 = __importDefault(require("../setting/RepeatBtn"));
+var GuideBtn_1 = __importDefault(require("../setting/GuideBtn"));
+var JAnswerContents = function (_a) {
+    var wordAndColors = _a.wordAndColors, isDoublePress = _a.isDoublePress, handleChoice = _a.handleChoice, isNotSearch = _a.isNotSearch, navigation = _a.navigation;
+    return (<react_native_1.View>
+      <react_native_1.View style={styles.bottomBtnBox}>
+        <RepeatBtn_1.default isPreLoad={true}/>
+        <GuideBtn_1.default navigation={navigation}/>
+      </react_native_1.View>
+      <react_native_1.View style={styles.container}>
+        {wordAndColors.map(function (_a, i) {
+            var word = _a.word, color = _a.color;
+            return (<common_1.DoubleTapWrapper key={i} onPress={function () { return handleChoice(i); }} isDoublePress={isDoublePress}>
+            <react_native_1.View style={__assign(__assign({}, styles.choice), { borderColor: lib_1.colors[color] })}>
+              {color === "red" && (<react_native_1.View style={styles.maruBox}>
+                  <common_1.IconInCircle name="check" size={15} iconColor="green" cStyle={{ width: 25, height: 25 }}/>
+                </react_native_1.View>)}
+              <RenderImgOrText_1.default word={word} isNotSearch={isNotSearch}/>
+            </react_native_1.View>
+          </common_1.DoubleTapWrapper>);
+        })}
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+var styles = react_native_1.StyleSheet.create({
+    container: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        marginHorizontal: 5,
+        marginBottom: 60,
+    },
+    bottomBtnBox: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginHorizontal: 10,
+        marginBottom: 10,
+    },
+    maruBox: {
+        position: "absolute",
+        top: 3,
+        left: 3,
+        zIndex: 1,
+        borderRadius: 10,
+        backgroundColor: lib_1.colors.bkBeige,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    choice: {
+        position: "relative",
+        backgroundColor: lib_1.colors.bkBeige,
+        justifyContent: "center",
+        alignItems: "center",
+        width: "49%",
+        height: 111,
+        marginBottom: 5,
+        borderRadius: 5,
+        borderWidth: 2,
+    },
+});
+exports.default = JAnswerContents;

package/dist/quiz/jQuestion/JQuestion.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { Nav } from "@nakamura-123/types";
+import { StackNavigationProp } from "@react-navigation/stack";
+type Props = {
+    navigation: StackNavigationProp<Nav.RootStackParamList>;
+};
+declare const JQuestion: React.FC<Props>;
+export default JQuestion;