Frontend Memo

[elianiva]

Data Collection Checklist

Keyboard

Timing Features

• Session Duration (might need some refactoring)
  The duration of user.
• Pause Rate (might need some refactoring)
  How long a user doesn't do anything.

Typing Features

• Typing Speed [Frontend] emit every events to backend #31
  We can calculate the user's WPM. Average person usually types around 40-60WPM.
  • emit from frontend
  • calculate wpm in backend ((cpm / 5) where 5 is the average characters per word)
• Key Duration
  The duration of a user holding down the same key. The way we calculate this is by sending a keypress event with its timestamp (ms) to the backend.
  • emit from frontend
  • calculate in backend (default key delay linux: 660ms, windows: 500ms?, mac: ???ms)
• Deletion Rate
  How fast the user presses the backspace button.
  • emit from frontend
  • calculate in backend
• Key Latency
  The duration between the start of keypress and response.
  • this one is a bit questionable, how do we know the latency?
• Unrelated keys rate
  These are the keys that are probably unrelated to the coding question. Possible keys are:

  • any keys outside the editor

  • F keys (F1-F12)

  • emit from frontend

Video

• A video from the user's webcam (stream video to backend #260)
  A plain simple video, no need for face tracking or fancy stuff.
  • stream from frontend using WebRTC
  • receive stream in backend

Mouse

We could probably reuse some logic from https://codepen.io/ronnygunawan/pen/wvrojXg

Movement Features

• Path length
  Calculate total movement.
  • emit mouse position from frontend
  • calculate length in backend
• Speed
  Average movement. How fast a mouse moving from point A to B.
  • emit timestamp + position from frontend
  • calculate speed in backend
• Acceleration
  Mouse acceleration. How fast the acceleration when moving the cursor.
  • emit timestamp + position from frontend
  • calculate acceleration in backend
• Number of pause (3s, 5s, 10s++)
  Amount of pauses between mouse movement. We'll store how many times a user pauses every 3s, 5s, and 10s.
  • emit click and timestamp from frontend
  • calculate in backend (find delta between timestamp of clicks?)

Click Features

• Number of clicks
  How many time the user clicks the cursor.
  • emit click from frontend
  • calculate in backend
• Time between pressing and releasing a mouse button
  How long the user holds the mouse click.
  • emit keyup and keydown from frontend (refactor: split mouse_clicked event into 2 events #266)
  • calculate time delta in backend (feat(worker): calculate mouse click duration #271)

Scroll Features

• Number of scroll
  How many times the user scrolls the page.
  • emit scroll event from frontend
  • count in backend
• Scroll distance
  How far the user scrolls the page.
  • emit from frontend (do we calculate this on frontend/backend?)
• Speed
  How fast the user scrolls.
  • emit from frontend (again, where do we calculate this?)

---

Pages Checklist

• Frontpage ([Frontend] new design #6)
  This page is going to be used for the user's form. A simple form with multiple input fields.
• Coding Test ([Frontend] use Codemirror #19)
  This page is where the user will spend most of their time. It consists of 6 pages where each page contains one coding problem they needed to solve. We'd do most of the tracking here.
• SAM Assessment
  This page contains several options that the user can choose to determine how they feel before and after the test.
• Stats Overview ([Frontend] add stats overview after finishing the test #23)
  This page is used after the user has done the test. We want this because it gives the user some sort of a reward after doing the test.

---

Misc Features Checklist

• Give up button in case the user doesn't have the balls to continue the test wants to give up
• Emit event to backend every keypress/mouse activity
• Documentation for frontend #153

[aldy505]

@elianiva jangan lupa, endpoint buat secret page yang kemarin. isinya list data yang bisa di download + nama user nya

[aldy505]

oh yeah. and a give up button. see https://t.me/c/1691679327/21713