tutor-task-preview

This module defines [Knockout components][ko-elem] to simplify the usage of our markdown converter and additional features.

After this module is required, the following two components are available:
*
Converts a markdown string to HTML and displays it. Supports everything that
[@tutor/markdown2html][md2h] supports (i.e. executing scripts, running tests, trees,
graphs).

*
Displays markdown fields and titles for an entire _task_, this includes the
task description, the solution and a model solution.

[ko-elem]: http://knockoutjs.com/documentation/component-overview.html
[md2h]: https://github.com/Welfenlab/tutor-markdown2html

Usage

$3

The 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
``js
var viewModel = {
markdown: ko.observable(
"# hello world\n" +
"`tests\n" +
"it('should be put into the test results', function(){ });" +
"`"),
testResults: ko.observable([])
}
`
`html


`

$3


The 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
`js
var viewModel = {
task: {
number: 42,
title: 'Demo task',
text: 'In _this_ task, you should do something.'
}
}
`
`html

`

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][less], you can import either of the following files with
[less-plugin-npm-import][less-npm].

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

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

[less]: http://lesscss.org/
[less-npm]: https://github.com/less/less-plugin-npm-import