https://github.com/interacto/demo-session
Science Score: 13.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
○CITATION.cff file
-
✓codemeta.json file
Found codemeta.json file -
○.zenodo.json file
-
○DOI references
-
○Academic publication links
-
○Academic email domains
-
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Low similarity (10.2%) to scientific vocabulary
Repository
Basic Info
- Host: GitHub
- Owner: interacto
- Language: TypeScript
- Default Branch: master
- Size: 254 KB
Statistics
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
- Releases: 0
Metadata Files
README.md
Practical Session with Interacto
clone the project and run
npm installin the project folder to install the dependenciesrun the Angular app (run
Angular CLI Server)Open the documentation we provided on Interacto (https://interacto.github.io/)
#1 -- Triple click to change a color
A triple-click on the div element triple (located in the HTML file) must change the color contained in dataService to a random color value.
The background color of this triple div element uses dataService.color so that you should be able to see the change.
The class DataService already provides a method setNewRandomColor to set its color attribute with a new random value.
Question 1 Implement this feature without considering undo/redo.
- With Interacto,
clicksBinder(nb)refers to an N-click interaction. - Using the Web/Angular API: a mouse event has an attribute
detailthat refers to the number of clicks.
Question 2 Adapt your code to be able to undo/redo color changes.
#2 -- Write text
Editing the text of the textarea HTML element must change dataService.text.
A precision: do this action when the textarea is idle for 1 second.
For example: the user writes a sequence of letters and then stops for more than 1 second, so that dataService.text is updated.
This is a mainstream optimisation that many text processing tools implement to limit the number of editing actions.
Question 1 Implement this feature without considering undo/redo.
#3 -- Drag-and-drop a shape
The last exercise consists in moving a rectangle using a drag-and-drop interaction: Press on the rectangle, drag it to a location, and release it to end its translation.
The rectangle to move is the rectangle rec defined in the HTML file.
Question 1 Implement this feature without considering undo/redo.
Note that the Interacto dndBinder(true) may help you.
Using the Web/Angular API you can use the classical mousedown, mouseup, mousemove event listeners or https://v7.material.angular.io/cdk/drag-drop/overview#getting-started.
Note that the attribute dataService.position defines the x/y coordinates of the rectangle.
Question 2 Adapt your code to be able to undo/redo the moves.
Owner
- Name: Interacto
- Login: interacto
- Kind: organization
- Repositories: 7
- Profile: https://github.com/interacto
GitHub Events
Total
Last Year
Issues and Pull Requests
Last synced: over 1 year ago
All Time
- Total issues: 0
- Total pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Total issue authors: 0
- Total pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0
Past Year
- Issues: 0
- Pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Issue authors: 0
- Pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0