tutor-task-preview

This module defines Knockout components to simplify the usage of our markdown converter and additional features.

After this module is required, the following two components are available:

• <tutor-task-markdown>
  Converts a markdown string to HTML and displays it. Supports everything that @tutor/markdown2html supports (i.e. executing scripts, running tests, trees, graphs).

• <tutor-task-preview>
  Displays markdown fields and titles for an entire task, this includes the task description, the solution and a model solution.

Usage

tutor-task-markdown

The <tutor-task-markdown> element has two parameters:

• markdown specifies a (observable) markdown string to convert
• testResults (optional) specifies a function to call whenever the tests results are updated (as ko.observable variables are functions, you can also use these)

Example

var viewModel = {
  markdown: ko.observable(
    "# hello world\n" +
    "```tests\n" +
    "it('should be put into the test results', function(){ });" +
    "```"),
  testResults: ko.observable([])
}

<tutor-task-markdown params="
  markdown: markdown,
  testResults: testResults">
</tutor-task-markdown>

tutor-task-preview

The <tutor-task-preview> element has three parameters:

• task specifies the task to display, it needs to have (at least) the following observable properties:
  • number specifies the number of the task
  • title (optional) specifies the title of the task
  • text specifies the task description
  • solution specifies the solution to display
  • tests (optional) additional markdown with tests to prepend to the rendered markdown; may be used to specify tests that the user won't see
  • testResults (optional) target for test results; if specified, this is used as the testResults callback (as described above)
• showModelSolutionPreview (optional, defaults to false) displays the markdown specified in task.modelSolution() below the solution

Example

var viewModel = {
  task: {
    number: 42,
    title: 'Demo task',
    text: 'In _this_ task, you should do something.'
  }
}

<tutor-task-preview params="task: task"></tutor-task-preview>

Stylesheet

We also provide a default stylesheet that fixes display bugs with graphs and another one that also makes tables somewhat more beautiful. If you're using LESS, you can import either of the following files with less-plugin-npm-import.

 /* fixes only */
@import "npm://@tutor/task-preview/res/fixes";

/* fixes + default style */
@import "npm://@tutor/task-preview/res/default-style";