The dashboard for the assistance system developed as part of the VerDatAs project.
nvm use # (or `nvm install` if not yet installed)
npm installCreate a .env.development file in order to specify values for the following variables:
VITE_BACKEND_URL=TAS_BACKEND_URL # the URL of the tud-tas-backend
VITE_PSEUDO_ID=LMS_PSEUDO_ID # the user identification specified by the LMS that is used within the statements
VITE_COURSE_ID=LMS_COURSE_OBJECT_ID # the objectId of the LMS course
VITE_CAN_VIEW_ONLY=true|false # the decision, whether the student or the lecturer view should be displayed
VITE_PREVIEW_MODE=true|false # the decision, whether the preview of the dashboard should be shown (locally, use false)
In order to modify the generic course format that is used for redrawing the knowledge graph, navigate into ./src/utl/InitialEvent.js.
Start compile and hot-reload for development:
npm run devnpm run buildLint with ESLint
npm run lintnpm run type-checkThe metamodel is specified in the folder src/util/KnowledgeGraph/moddle/resources using the moddle-library:
verDatAs.jsonfor the general element and attributes definition as well asverDatAsDi.jsonfor the visual part.
In our metamodel, the following options for properties are used:
"isAbstract": trueallows to define inheritance."isMany": trueallows nesting elements. The children contain the complete elements, i.e., tags as well as attributes."isBody": trueallows nesting attributes within element tags."isAttr": trueallows defining attributes in String format (similar to values of HTML attributes).
The following objects have to be retrieved to execute the described functions.
const canvas = this.diagram.get('canvas')
const moddle = this.diagram.get('moddle')
const modeling = this.diagram.get('modeling')
const elementFactory = this.diagram.get('elementFactory')Create elements as children of the <verDatAs:knowledgeGraph /> and automatically add a graphical representation of them.
const moduleType = 'verDatAs:Chapter'
const modulePosition = { x: 100, y: 200 }
const rootElement = canvas.getRootElement()
const moduleShape = modeling.createShape(moduleType, modulePosition, rootElement)Create graphical representations of elements and add them as children of other elements.
const moduleDimensions = { width: 70, height: 70 }
const moduleAttributes = { ...modulePosition, ...moduleDimensions, ...moduleType }
const moduleShape = elementFactory.create('shape', moduleAttributes)
canvas.addShape(moduleShape)
// the Topic has defined a property "modules" with "isMany": true
const existingModules = knowledgeGraphTopic.businessObject?.modules ?? []
existingModules.push(moduleShape.businessObject)
modeling.updateProperties(knowledgeGraphTopic, { modules: existingModules })Create elements as children of other elements.
// chapterShape was created using "elementFactory.createShape"
const element = moddle.create('verDatAs:ContentPage', pageProperties)
contentPages.push(element)
chapterProperties['contentPages'] = contentPages
modeling.updateProperties(chapterShape, chapterProperties)Update properties that have defined a "isMany": true relation in combination with "isBody": true.
const priorKnowledgeElements = []
this.priorKnowledgeValue.forEach((elem) => {
const element = this.diagram.get('moddle').create('verDatAs:PriorKnowledge', {
elementId: elem.businessObject.id
})
priorKnowledgeElements.push(element)
})
const propertyToDefine = {}
propertyToDefine['priorKnowledgeElements'] = priorKnowledgeElements
// "elementToUpdate" is the element for whose the property should be defined
this.diagram.get('modeling').updateProperties(elementToUpdate, propertyToDefine)- The folder of the
tud-dashboardshould be located within the same folder such as tud-dashboard-plugin. - In order to build the application and move it into the plugin, run the following command:
npm run build-move iliasThis plugin is licensed under the GPL v3 License (for further information, see LICENSE).
The libraries used in this project are listed in the following table. This information can also be requested by:
npm run extract-licenses
After that the list of libraries used can be found in dist/THIRD-PARTY-tud-dashboard.md.