Forum OpenACS Development: Re: Re: WYSIWYG, XoWiki, and Semantic markup

Collapse
Posted by Gustaf Neumann on
Here is a small example to show, how to use XoWiki for providing a semantic markup and a simpler toolbar. The screen shot below shows a multiple choice exercise with a problem description, some correct and incorrect answers and an explanation text.
http://media.wu-wien.ac.at/download/xowiki-doc/configured_xinha.png

This can be coded in HTML by using classes, like for example in the following:

<p class="problem_text">
Welche Aussagen zu dem ARIS-Architekturmodell sind (ist) richtig?</p>

<ul>
<li class="correct_choice">ARIS ist ein von August-Wilhelm Scheer entwickeltes Integrationskonzept, das aus einer ganzheitlichen Betrachtung von Geschäftsprozessen abgeleitet wird. Die Komplexität wird durch die Partitionierung (Sichten) und die Beschreibung auf drei unterschiedlichen Abstraktionsniveaus (Schichten)
reduziert. </li>


...

Xinha comes with a plugin called stylist, which uses as input CSS style declarations (e.g. a style file) and constructs from the CSS selectors a panel on the right side of the editor window which can be used to mark/unmark text entities. The neat part is that stylist is context sensitive, which means that it does only propose markup entries where this is allowed depending on the CSS file.
It the example, one can only mark correct/incorrect answers via list items. Here is a part of the the CSS file:
p.problem_text {
    font: 12px 'Lucida Grande', Verdana, Arial, sans-serif;
    color: #222222;
}
li.correct_choice {
    font: 12px 'Lucida Grande', Verdana, Arial, sans-serif;
    color: #006600;
    list-style: none;
    background: url(/resources/xowiki/examples/check_richtig.png) center left no-repeat;
    margin-left:-30px;
    padding-left: 30px;
    margin-bottom:12px;
}
li.incorrect_choice {...}
...
Note that the toolbar of the Xinha editor in the above screen shot is significantly reduced from the default. The full example is described in http://media.wu-wien.ac.at/download/xowiki-doc/index.html#js and included in the CVS.

For installing it, be aware of the dependencies described in
http://www.openacs.org/forums/message-view?message_id=443412
Furthermore, one has to add class to the allowed attributes for user supplied input (AllowedAttribute in kernel parameters).

This example shows that it is quite easy to provide semantic markup with xinha. traditional wiki style markups don't allow this.