Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend Memo #10

Closed
38 of 49 tasks
elianiva opened this issue Dec 14, 2021 · 2 comments
Closed
38 of 49 tasks

Frontend Memo #10

elianiva opened this issue Dec 14, 2021 · 2 comments
Labels
scope: frontend Regarding the frontend side

Comments

@elianiva
Copy link
Member

elianiva commented Dec 14, 2021

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

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 aldy505 added the scope: frontend Regarding the frontend side label Dec 14, 2021
@aldy505 aldy505 pinned this issue Dec 14, 2021
@aldy505
Copy link
Member

aldy505 commented Dec 14, 2021

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

@aldy505
Copy link
Member

aldy505 commented Dec 15, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
scope: frontend Regarding the frontend side
Projects
None yet
Development

No branches or pull requests

2 participants