Task preview renderer for students.


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Mar 20, 2016Nov 27, 2015Minified + gzip package size for @tutor/task-preview in KB



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.



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)


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">


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


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>


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";

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.