{"id":16701096,"url":"https://github.com/arnobl/xp-interacto","last_synced_at":"2025-03-14T06:12:28.304Z","repository":{"id":145959178,"uuid":"319139101","full_name":"arnobl/xp-interacto","owner":"arnobl","description":null,"archived":false,"fork":false,"pushed_at":"2020-12-07T08:11:12.000Z","size":141,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-21T00:50:02.181Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobl.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-06T21:52:04.000Z","updated_at":"2020-12-07T08:11:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"eff2d310-75be-4952-ab98-581d49a2987e","html_url":"https://github.com/arnobl/xp-interacto","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobl%2Fxp-interacto","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobl%2Fxp-interacto/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobl%2Fxp-interacto/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobl%2Fxp-interacto/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobl","download_url":"https://codeload.github.com/arnobl/xp-interacto/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243532549,"owners_count":20306155,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-12T18:28:38.891Z","updated_at":"2025-03-14T06:12:28.279Z","avatar_url":"https://github.com/arnobl.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Practical Session: an experiment with Interacto\n\n- clone the project and run `npm install` in the project folder to install the dependencies\n\n\n- run the Angular app (run `Angular CLI Server`)\n\n\n- Open the documentation we provided on Interacto (https://interacto.github.io/)\n\n\n- Do the three exercises **using the Interacto library**.\u003cbr/\u003e\n  Do not forget to commit locally your changes after each question (do not forget to add new files to git, if you created new files).\n  Several questions may compose each exercise.\u003cbr/\u003e\n  The code to edit is located in `src/app/component/tp2`.\n  You can modify `ts`, `html`, or `css` files of this component.\n  Take a quick look at these files before starting the exercises.\n  You can also modify `src/app/service/data.service.ts`.\n  There is no need to write tests.\u003cbr/\u003e\n  As a reminder, in Angular you can create new class using this command:\n  `ng generate class classname`\n\n- you have a deadline/time limit for each exercise (written in each exercise).\u003cbr/\u003e\n  Do not forgot to commit files even if the time limit expired.\u003cbr/\u003e\n  You can switch to the next exercise before the time limit.\n\n- At the end of the session, delete the folder `node_modules`, put a zipped file of the project folder on moodle: https://moodleng.insa-rennes.fr/mod/assign/view.php?id=18007 \u003cbr/\u003e\n  Make sure the archive contains the hidden folder `.git`.\n\n- During the experiment you can ask the supervisor for clarifications but not for help ;)\n\n\n## #0\n\nPlease, put your name here:\n\n\nCommit the file locally. As a reminder, you can commit using IntelliJ or using the command line: `git commit -m \"readme\" .`\n\n\n## #1 -- Triple click to change a color\n\nA triple-click on the div element `triple` (located in the HTML file) must change the color contained in `dataService` to a random color value.\nThe background color of this `triple` div element uses `dataService.color` so that you should be able to see the change.\n\nThe class `DataService` already provides a method `setNewRandomColor` to set its `color` attribute with a new random value.\n\nYou have 35 minutes max for this exercise.\n\n**Question 1** Implement this feature without considering undo/redo.\nCommit locally your code to keep the changes in this history with the message `1 q1` (do not forget to add new files to git, if you created new files).\n\n- With Interacto, `clicksBinder(nb)` refers to an N-click interaction.\n\n\n**Question 2** Adapt your code to be able to undo/redo color changes.\nCommit locally your code to keep the changes in this history with the message `1 q2` (do not forget to add new files to git, if you created new files).\n\n\n**Feedback**\nFrom 1 to 10 (10 being the most difficult), give the difficulty of each question:\n- Q1:\n- Q2:\n\nCommit locally this file.\n\n\n\n\n## #2 -- Write text\n\nEditing the text of the `textarea` HTML element must change `dataService.text`.\n\nA precision: do this action when the textarea is idle for 1 second.\nFor example: the user writes a sequence of letters and then stops for more than 1 second, so that `dataService.text` is updated.\n\nThis is a mainstream optimisation that many text processing tools implement to limit the number of editing actions.\n\nYou have 20 minutes max for this exercise.\n\n**Question 1** Implement this feature without considering undo/redo.\nCommit locally your code to keep the changes in this history with the message `2 q1` (do not forget to add new files to git, if you created new files).\n\n**Feedback**\nFrom 1 to 10 (10 being the most difficult), give the difficulty of the question:\n\nCommit locally this file.\n\n\n\n\n## #3 -- Drag-and-drop a shape\n\nThe last exercise consists in moving a rectangle using a drag-and-drop interaction:\nPress on the rectangle, drag it to a location, and release it to end its translation.\n\nThe rectangle to move is the rectangle `rec` defined in the HTML file.\n\nYou have 40 minutes max for this exercise.\n\n**Question 1** Implement this feature without considering undo/redo.\nCommit locally your code to keep the changes in this history with the message `3 q1` (do not forget to add new files to git, if you created new files).\n\nNote that the Interacto `dndBinder(true)` may help you. The attribute `dataService.position` defines the x/y coordinates of the rectangle.\n\n\n**Question 2** Adapt your code to be able to undo/redo the moves.\nCommit locally your code to keep the changes in this history with the message `3 q2` (do not forget to add new files to git, if you created new files).\n\n**Feedback**\nFrom 1 to 10 (10 being the most difficult), give the difficulty of each question:\n- Q1:\n- Q2:\n\n\n## Feedback\n\nYou can write here your feelings, some feedback about the exercises and the framework you used:\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobl%2Fxp-interacto","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobl%2Fxp-interacto","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobl%2Fxp-interacto/lists"}