A task bit for highlighting parts of a given text.

This is an interactive example of the Highlighting task. You can submit new answers, show a statistic based on thoses answers or modify the task by using the different forms.

Cale, Srawberry, Banana, Milk, Test

This is a list of all exported components and functions. These are only relevant if you want to use this task in a standalone way.

import {
  Task, TaskSchema,
  ViewForm, EvaluationForm, FeedbackForm,
  evaluate, updateStatistic, Statistic
} from "@bitflow/task-highlighting"

• Task: The task component displays the task.
• ViewForm: A form to set the neccessary data for a task.
• EvaluationForm: A form to set how an answer for a task will be evaluated.
• FeedbackForm: A form to set when and how feedback will be displayed.
• evaluate: Evaluates if a answer for a task is correct and may add feedback.
• updateStatistic: Generates/updates a statistic for a task based on an answer and result.
• Statistic: Visualizes the statistic for a task. You can use updateStatistic to generate a statistic.
• TaskSchema: Is a zod schema, which can be used to validate a task object. It follows the JSON schema down below.

We recommand that you wrap this component with the TaskShell component like so, if you want to use the component on its own.

import { TaskShell } from "@bitflow/shell";
import { evaluate, Task } from "@bitflow/task-highlighting";

const My = () => (
  <TaskShell
    onNext={async () => {}}
    evaluate={evaluate}
    TaskComponent={Task}
    mode="default"
    task={task}
  />
);
            

You can also use this task with the Do component.

Each task emits different actions, which can be used for capture and replay the solving process. These are defined by the IAction type.

If you do not want to use the provided forms to create a task object, you can build something yourself which produces a object, which follows this JSON schema.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
    "description": {
      "type": "string"
    },
    "subtype": {
      "type": "string",
      "const": "highlighting"
    },
    "view": {
      "type": "object",
      "properties": {
        "instruction": {
          "type": "string"
        },
        "text": {
          "type": "string"
        },
        "colors": {
          "type": "object",
          "properties": {
            "maroon": {
              "type": "object",
              "properties": {
                "enabled": {
                  "type": "boolean"
                },
                "label": {
                  "type": "string"
                }
              },
              "required": [
                "enabled"
              ],
              "additionalProperties": false
            },
            "orange": {
              "$ref": "#/properties/view/properties/colors/properties/maroon"
            },
            "blue": {
              "$ref": "#/properties/view/properties/colors/properties/maroon"
            },
            "lavender": {
              "$ref": "#/properties/view/properties/colors/properties/maroon"
            },
            "yellow": {
              "$ref": "#/properties/view/properties/colors/properties/maroon"
            }
          },
          "required": [
            "maroon",
            "orange",
            "blue",
            "lavender",
            "yellow"
          ],
          "additionalProperties": false
        }
      },
      "required": [
        "instruction",
        "text",
        "colors"
      ],
      "additionalProperties": false
    },
    "evaluation": {
      "type": "object",
      "properties": {
        "mode": {
          "type": "string",
          "enum": [
            "auto",
            "skip",
            "manual"
          ]
        },
        "enableRetry": {
          "type": "boolean"
        },
        "showFeedback": {
          "type": "boolean"
        },
        "cutoffs": {
          "type": "object",
          "properties": {
            "maroon": {
              "type": "number"
            },
            "orange": {
              "type": "number"
            },
            "blue": {
              "type": "number"
            },
            "lavender": {
              "type": "number"
            },
            "yellow": {
              "type": "number"
            }
          },
          "required": [
            "maroon",
            "orange",
            "blue",
            "lavender",
            "yellow"
          ],
          "additionalProperties": false
        },
        "highlights": {
          "type": "array",
          "items": {
            "anyOf": [
              {
                "type": "string",
                "enum": [
                  "maroon",
                  "orange",
                  "blue",
                  "lavender",
                  "yellow"
                ]
              },
              {
                "type": "null"
              }
            ]
          }
        }
      },
      "required": [
        "mode",
        "enableRetry",
        "showFeedback",
        "cutoffs",
        "highlights"
      ],
      "additionalProperties": false
    },
    "feedback": {
      "type": "object",
      "properties": {
        "highlightAgreement": {
          "type": "boolean"
        },
        "agreement": {
          "type": "array",
          "items": {
            "type": "object",
            "properties": {
              "color": {
                "$ref": "#/properties/evaluation/properties/highlights/items/anyOf/0"
              },
              "threshold": {
                "type": "number"
              },
              "feedback": {
                "type": "object",
                "properties": {
                  "message": {
                    "type": "string"
                  },
                  "severity": {
                    "type": "string",
                    "enum": [
                      "error",
                      "warning",
                      "info",
                      "success"
                    ]
                  }
                },
                "required": [
                  "message",
                  "severity"
                ],
                "additionalProperties": false
              }
            },
            "required": [
              "color",
              "threshold",
              "feedback"
            ],
            "additionalProperties": false
          }
        }
      },
      "required": [
        "highlightAgreement"
      ],
      "additionalProperties": false
    }
  },
  "required": [
    "name",
    "subtype",
    "view",
    "evaluation",
    "feedback"
  ],
  "additionalProperties": false
}