diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/TrueFalseNodeView.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/TrueFalseNodeView.js
new file mode 100644
index 0000000000000000000000000000000000000000..ad6eb44d84f0bb4cdee64a43c96fd813422556de
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/TrueFalseNodeView.js
@@ -0,0 +1,55 @@
+import AbstractNodeView from '../../PortalService/AbstractNodeView';
+
+export default class TrueFalseNodeView extends AbstractNodeView {
+ constructor(
+ node,
+ view,
+ getPos,
+ decorations,
+ createPortal,
+ Component,
+ context,
+ ) {
+ super(node, view, getPos, decorations, createPortal, Component, context);
+
+ this.node = node;
+ this.outerView = view;
+ this.getPos = getPos;
+ this.context = context;
+ }
+
+ static name() {
+ return 'true_false';
+ }
+
+ update(node) {
+ this.node = node;
+ if (this.context.view[node.attrs.id]) {
+ const { state } = this.context.view[node.attrs.id];
+ const start = node.content.findDiffStart(state.doc.content);
+ if (start != null) {
+ let { a: endA, b: endB } = node.content.findDiffEnd(state.doc.content);
+ const overlap = start - Math.min(endA, endB);
+ if (overlap > 0) {
+ endA += overlap;
+ endB += overlap;
+ }
+ this.context.view[node.attrs.id].dispatch(
+ state.tr
+ .replace(start, endB, node.slice(start, endA))
+ .setMeta('fromOutside', true),
+ );
+ }
+ }
+
+ return true;
+ }
+
+ stopEvent(event) {
+ if (event.target.type === 'text') {
+ return true;
+ }
+ const innerView = this.context.view[this.node.attrs.id];
+ return innerView && innerView.dom.contains(event.target);
+ }
+}
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/TrueFalseQuestion.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/TrueFalseQuestion.js
new file mode 100644
index 0000000000000000000000000000000000000000..170c9511434894f509d95261dd267181c0d944da
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/TrueFalseQuestion.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import { isEmpty } from 'lodash';
+import { injectable } from 'inversify';
+import { Commands } from 'wax-prosemirror-utilities';
+import { v4 as uuidv4 } from 'uuid';
+import { Fragment } from 'prosemirror-model';
+import { TextSelection } from 'prosemirror-state';
+import { wrapIn } from 'prosemirror-commands';
+import ToolBarBtn from '../components/ToolBarBtn';
+import helpers from '../helpers/helpers';
+import Tools from '../../lib/Tools';
+
+const checkifEmpty = view => {
+ const { state } = view;
+ const { from, to } = state.selection;
+ state.doc.nodesBetween(from, to, (node, pos) => {
+ if (node.textContent !== ' ') Commands.simulateKey(view, 13, 'Enter');
+ });
+};
+
+const createOption = (main, context) => {
+ const { state, dispatch } = main;
+ /* Create Wrapping */
+ const { $from, $to } = state.selection;
+ const range = $from.blockRange($to);
+
+ wrapIn(state.config.schema.nodes.true_false_container, {
+ id: uuidv4(),
+ })(state, dispatch);
+
+ /* set New Selection */
+ dispatch(
+ main.state.tr.setSelection(
+ new TextSelection(main.state.tr.doc.resolve(range.$to.pos)),
+ ),
+ );
+
+ /* create Second Option */
+ const newAnswerId = uuidv4();
+ const answerOption = main.state.config.schema.nodes.true_false.create(
+ { id: newAnswerId },
+ Fragment.empty,
+ );
+ dispatch(main.state.tr.replaceSelectionWith(answerOption));
+ setTimeout(() => {
+ helpers.createEmptyParagraph(context, newAnswerId);
+ }, 50);
+};
+
+@injectable()
+class MultipleChoiceQuestion extends Tools {
+ title = 'Add True False Question';
+ icon = 'multipleChoice';
+ name = 'TrueFalse';
+ label = 'True False';
+
+ get run() {
+ return (view, main, context) => {
+ checkifEmpty(view);
+ createOption(main, context);
+ };
+ }
+
+ get active() {
+ return state => {
+ return Commands.isParentOfType(
+ state,
+ state.config.schema.nodes.true_false,
+ );
+ };
+ }
+
+ select = (state, activeView) => {
+ const { disallowedTools } = activeView.props;
+ if (disallowedTools.includes('MultipleChoice')) return false;
+ let status = true;
+ const { from, to } = state.selection;
+
+ if (from === null) return false;
+
+ state.doc.nodesBetween(from, to, (node, pos) => {
+ if (node.type.groups.includes('questions')) {
+ status = false;
+ }
+ });
+ return status;
+ };
+
+ get enable() {
+ return state => {};
+ }
+
+ renderTool(view) {
+ if (isEmpty(view)) return null;
+ // eslint-disable-next-line no-underscore-dangle
+ return this._isDisplayed ? (
+ <ToolBarBtn item={this.toJSON()} key={uuidv4()} view={view} />
+ ) : null;
+ }
+}
+
+export default MultipleChoiceQuestion;
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/TrueFalseQuestionService.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/TrueFalseQuestionService.js
new file mode 100644
index 0000000000000000000000000000000000000000..6455c52b11fdee27a6a288c8d338ac0e8f9474ee
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/TrueFalseQuestionService.js
@@ -0,0 +1,30 @@
+import Service from '../../Service';
+import TrueFalseQuestion from './TrueFalseQuestion';
+import trueFalseNode from './schema/trueFalseNode';
+import trueFalseContainerNode from './schema/trueFalseContainerNode';
+import QuestionComponent from './components/QuestionComponent';
+import TrueFalseNodeView from './TrueFalseNodeView';
+
+class TrueFalseQuestionService extends Service {
+ register() {
+ this.container.bind('TrueFalseQuestion').to(TrueFalseQuestion);
+ const createNode = this.container.get('CreateNode');
+ const addPortal = this.container.get('AddPortal');
+
+ createNode({
+ true_false_container: trueFalseContainerNode,
+ });
+
+ createNode({
+ true_false: trueFalseNode,
+ });
+
+ addPortal({
+ nodeView: TrueFalseNodeView,
+ component: QuestionComponent,
+ context: this.app,
+ });
+ }
+}
+
+export default TrueFalseQuestionService;
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/QuestionComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/QuestionComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..6cb99bb06687e6dd23777caa7fed83c9def2265b
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/QuestionComponent.js
@@ -0,0 +1,158 @@
+/* eslint-disable react/prop-types */
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { TextSelection } from 'prosemirror-state';
+import { WaxContext } from 'wax-prosemirror-core';
+import { PlusSquareOutlined, DeleteOutlined } from '@ant-design/icons';
+import { Fragment } from 'prosemirror-model';
+import { v4 as uuidv4 } from 'uuid';
+import helpers from '../../helpers/helpers';
+import FeedbackComponent from '../../components/FeedbackComponent';
+import EditorComponent from '../../components/EditorComponent';
+import Button from '../../components/Button';
+import SwitchComponent from './SwitchComponent';
+
+const Wrapper = styled.div`
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+`;
+
+const InfoRow = styled.div`
+ color: black;
+ display: flex;
+ flex-direction: row;
+ padding: 10px 0px 4px 0px;
+`;
+
+const QuestionNunber = styled.span`
+ &:before {
+ content: 'Answer ' counter(question-item-multiple);
+ counter-increment: question-item-multiple;
+ }
+`;
+
+const QuestionControlsWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+`;
+
+const QuestionWrapper = styled.div`
+ border: 1px solid #a5a1a2;
+ border-radius: 4px;
+ color: black;
+ display: flex;
+ flex: 2 1 auto;
+ flex-direction: column;
+ padding: 10px;
+`;
+
+const IconsWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ button {
+ border: none;
+ box-shadow: none;
+ }
+
+ span {
+ cursor: pointer;
+ }
+`;
+
+const QuestionData = styled.div`
+ align-items: normal;
+ display: flex;
+ flex-direction: row;
+`;
+
+export default ({ node, view, getPos }) => {
+ const context = useContext(WaxContext);
+ const {
+ view: { main },
+ } = context;
+
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+
+ const removeOption = () => {
+ main.state.doc.nodesBetween(getPos(), getPos() + 1, (sinlgeNode, pos) => {
+ if (sinlgeNode.attrs.id === node.attrs.id) {
+ main.dispatch(
+ main.state.tr.deleteRange(getPos(), getPos() + sinlgeNode.nodeSize),
+ );
+ }
+ });
+ };
+
+ const addOption = nodeId => {
+ const newAnswerId = uuidv4();
+ context.view.main.state.doc.descendants((editorNode, index) => {
+ if (editorNode.type.name === 'true_false') {
+ if (editorNode.attrs.id === nodeId) {
+ context.view.main.dispatch(
+ context.view.main.state.tr.setSelection(
+ new TextSelection(
+ context.view.main.state.tr.doc.resolve(
+ editorNode.nodeSize + index,
+ ),
+ ),
+ ),
+ );
+
+ const answerOption = context.view.main.state.config.schema.nodes.multiple_choice.create(
+ { id: newAnswerId },
+ Fragment.empty,
+ );
+ context.view.main.dispatch(
+ context.view.main.state.tr.replaceSelectionWith(answerOption),
+ );
+ // create Empty Paragraph
+ setTimeout(() => {
+ helpers.createEmptyParagraph(context, newAnswerId);
+ }, 120);
+ }
+ }
+ });
+ };
+
+ const readOnly = !isEditable;
+ const showAddIcon = true;
+ const showRemoveIcon = true;
+
+ return (
+ <Wrapper>
+ <QuestionControlsWrapper>
+ <InfoRow>
+ <QuestionNunber />
+ <SwitchComponent getPos={getPos} node={node} />
+ </InfoRow>
+ <QuestionWrapper>
+ <QuestionData>
+ <EditorComponent getPos={getPos} node={node} view={view} />
+ </QuestionData>
+ <FeedbackComponent getPos={getPos} node={node} view={view} />
+ </QuestionWrapper>
+ </QuestionControlsWrapper>
+ <IconsWrapper>
+ {showAddIcon && !readOnly && (
+ <Button
+ icon={<PlusSquareOutlined title="Add Option" />}
+ onClick={() => addOption(node.attrs.id)}
+ />
+ )}
+ {showRemoveIcon && !readOnly && (
+ <Button
+ icon={
+ <DeleteOutlined onClick={removeOption} title="Delete Option" />
+ }
+ />
+ )}
+ </IconsWrapper>
+ </Wrapper>
+ );
+};
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js
new file mode 100644
index 0000000000000000000000000000000000000000..7dfc75a94e8c564272b33400d4653892d0f27fdd
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/components/SwitchComponent.js
@@ -0,0 +1,77 @@
+/* eslint-disable react/prop-types */
+
+import React, { useState, useContext, useEffect } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
+import styled from 'styled-components';
+import Switch from '../../components/Switch';
+
+const StyledSwitch = styled(Switch)`
+ display: flex;
+ margin-left: auto;
+
+ span:nth-child(1) {
+ // bottom: 36px;
+ // display: flex;
+ // left: 4px;
+ // position: relative;
+ // width: 0px;
+ }
+
+ .ant-switch-checked {
+ background-color: green;
+ }
+`;
+
+const CustomSwitch = ({ node, getPos }) => {
+ const context = useContext(WaxContext);
+ const [checked, setChecked] = useState(false);
+
+ useEffect(() => {
+ const allNodes = getNodes(context.view.main);
+ allNodes.forEach(singNode => {
+ if (singNode.node.attrs.id === node.attrs.id) {
+ setChecked(singNode.node.attrs.correct);
+ }
+ });
+ }, [getNodes(context.view.main)]);
+
+ const handleChange = () => {
+ setChecked(!checked);
+ const allNodes = getNodes(context.view.main);
+ allNodes.forEach(singleNode => {
+ if (singleNode.node.attrs.id === node.attrs.id) {
+ context.view.main.dispatch(
+ context.view.main.state.tr.setNodeMarkup(getPos(), undefined, {
+ ...singleNode.node.attrs,
+ correct: !checked,
+ }),
+ );
+ }
+ });
+ };
+
+ return (
+ <StyledSwitch
+ checked={checked}
+ checkedChildren="True"
+ label="True/false?"
+ labelPosition="left"
+ onChange={handleChange}
+ unCheckedChildren="False"
+ />
+ );
+};
+
+const getNodes = view => {
+ const allNodes = DocumentHelpers.findBlockNodes(view.state.doc);
+ const multipleChoiceNodes = [];
+ allNodes.forEach(node => {
+ if (node.node.type.name === 'true_false') {
+ multipleChoiceNodes.push(node);
+ }
+ });
+ return multipleChoiceNodes;
+};
+
+export default CustomSwitch;
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/schema/trueFalseContainerNode.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/schema/trueFalseContainerNode.js
new file mode 100644
index 0000000000000000000000000000000000000000..23f5a11e51aee942eb7ca051cba2584db691fe39
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/schema/trueFalseContainerNode.js
@@ -0,0 +1,27 @@
+const trueFalseContainerNode = {
+ attrs: {
+ id: { default: '' },
+ class: { default: 'true-false' },
+ },
+ group: 'block questions',
+ atom: true,
+ selectable: true,
+ draggable: true,
+ content: 'true_false+',
+ parseDOM: [
+ {
+ tag: 'div.true-false',
+ getAttrs(dom) {
+ return {
+ id: dom.dataset.id,
+ class: dom.getAttribute('class'),
+ };
+ },
+ },
+ ],
+ toDOM(node) {
+ return ['div', node.attrs, 0];
+ },
+};
+
+export default trueFalseContainerNode;
diff --git a/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/schema/trueFalseNode.js b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/schema/trueFalseNode.js
new file mode 100644
index 0000000000000000000000000000000000000000..2d9c0de706a3aadc1e0b7f118e12588bf70d5a11
--- /dev/null
+++ b/wax-prosemirror-services/src/MultipleChoiceQuestionService/TrueFalseQuestionService/schema/trueFalseNode.js
@@ -0,0 +1,30 @@
+import { v4 as uuidv4 } from 'uuid';
+
+const trueFalseNode = {
+ attrs: {
+ class: { default: 'true-false-option' },
+ id: { default: uuidv4() },
+ correct: { default: false },
+ feedback: { default: '' },
+ },
+ group: 'block questions',
+ content: 'block*',
+ defining: true,
+
+ parseDOM: [
+ {
+ tag: 'div.true-false-option',
+ getAttrs(dom) {
+ return {
+ id: dom.getAttribute('id'),
+ class: dom.getAttribute('class'),
+ correct: JSON.parse(dom.getAttribute('correct').toLowerCase()),
+ feedback: dom.getAttribute('feedback'),
+ };
+ },
+ },
+ ],
+ toDOM: node => ['div', node.attrs, 0],
+};
+
+export default trueFalseNode;