System Building

File Structure

• index.html: welcome (first) page
• information.html: information gathering (second) page
• stickynote.html: sticky note (third) page
• css - style.css: contains all css information
• data - data.json: contains some examples and prompts (give user some tips)
  • notes (some sample sticky notes)
    • type
    • content
    • index
  • actions (some actions the users might think of)
• js
  • FileSaver.js: save files to the local drive
  • recorder.js: the recording functionality on the information gathering (second) page
  • StickyNotes.js: functions on the sticky note (third) page
• images
  • support.png: the image on the welcome (first) page

Tutorial

This platform is designed and implemented to help address online harm, focusing on the sense-making process.

The homepage shows a welcome message and a description of this platform. Hitting the "next" button, you will be directed to the storytelling page where we gather relevant information.

We ask you to record or type your story and share how you feel. Push the "record" button to start recording. If you need to pause in the middle, you can press the pause button. Press "stop" to stop recording, and you can record new pieces. You can replay or download them in the recordings list. On the right-hand side, you can type down what has happened. You can use words or emojis to show your feelings.

Click "next" and your responses will be downloaded (though the audio pieces need manual downloading one by one). You will be directed to the sense-making page.

We list some examples for you to better understand how it works. We ask you to think about the stakeholders in the harm case and your needs. We list several stakeholder categories, such as offenders, family and friends, online platforms, online community members, and schools. And you may further think of specific individuals in each category. We also list some common needs that the victim may have, like sensemaking, emotional support and validation, retribution, safety and transformation. You can create a new node after selecting the type of note you want to create and inputting the content. You can also delete the sticky note by double-clicking.

Hit the "next" button on the bottom right, you will be asked to pair the needs with the stakeholder and the action you expect from them. We gave you some prompts based on the need and stakeholders that you entered on the previous page, and some common actions you might expect from them, but you're welcome to type your own thoughts. Click "create" to generate the sticky note combining the three, stating "you hope who can do what to solve what needs".

Then you can hit the "next" button to put the sticky notes onto the timeline. In this process, we ask you to think about the order to address the harm. Click "complete" and your sticky notes will be downloaded.