Skip to content

sormpe/acos-annotation-tool

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

71 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Netlify Status

Acos annotation tool

This is a repository for Acos server tool called "code annotation tool". With this tool course instructors can easily create annotations that highlights specific parts of a program code.

Please note that the tool is just for previewing the code annotations. It does not actually create any HTML or CSS which you could copypaste somewhere. Instead, the tool generates both RST and spesific JSON object. The RST can be used within A+ Learning Management System with help of spesific rst tools. The JSON is used within Acos and the actual JSON handling is done by spesific code annotation Acos content type.

You can test the deployed version (from master branch) of the tool here

JSON syntax

The tool generates following JSON.

<name_of_the_object> = [
    {
      language: ''
    },
    {
      content: '',
      annotatedContent: ''
    },
    {
      annotations: []
    }
  ]

Install

Acos server

In acos root folder:

git -C node_modules clone https://github.com/sormpe/acos-annotation-tool.git
cd node_modules/acos-annotation-tool/app
npm install

Postinstall script build generates a build version of the app. After that the tool can be found in <acos_server_url>/code-annotation-tool/

Usage

General

The usage of the tool is simple: You can write, paste or edit plain text or program code with the editor which is located to a left side on the tool. In right side there is a preview view. The tool generetes preview in real time, and shows how code annotations will look like in Acos server.

Adding annotations

Select or multiselect part(s) of the text/code in the editor and click 'add annotation' button which creates a block for the selected part(s). The you can write your annotation (i.e explanation) which can includes HTML tags, such as those for adding typographical emphasis or URLs to other resources online. In preview view you can see the block below the text/code. The user can hover this block - and while hovering - the selected part of the text/code will be highlighted. You can also remove or change order of the annotations.

Publishing

Basically you just copy the generated JSON and paste it to a spesific content package. As a reference, please see sample content package and especially its content. There you can see sample JSONs which were generated with this tool.

Edit nesseccary meta information of the package and publish package in Acos.

Related packages

https://github.com/sormpe/acos-code-annotation

https://github.com/sormpe/acos-code-annotation-sample

License

The MIT License (MIT). Please see License File for more information.

About

No description or website provided.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published