Website to collect digital trace data for the information overload in hiring study at Stanford University.
The HIO website is designed to be embedded within an <iframe>
in a Qualtrics survey, allowing researchers to combine the survey responses with the digital trace data collected by the site.
Participants see resume content for the same candidate, but with different names (varying gender and race). The participant experiences the high, moderate, or low information condition, and responds to questions about the candidate in a simulated hiring process.
The HIO website tracks how the participant interacts with it through clicks and scrolling, which the researcher can combine with the survey responses to see how information overload may affect bias in the participant's decision.
The website requires certain parameters to be specified in the URL. The format is the following:
http://DOMAIN_HERE/#/candidate/:qualtricsUserId/?name=:candidateName&load=:load
:qualtricsUserId
, :candidateName
, and :load
should be replaced with the specific values needed. :load
should be 0
, 1
, or 2
, which are (respectively) interpreted as low, moderate, and high information conditions.
The HIO website can be embedded in Qualtrics like so:
<iframe height="830px" width="100%" src="https://DOMAIN_HERE/#/candidate/${e://Field/ResponseID}/?name=${e://Field/candidateName}&load=${e://Field/infoLevel}"></iframe>
These instructions will get you a copy of the project up and running.
-
Clone the repo.
git clone https://github.com/TheFirstQuestion/hiring-information-overload-website.git
-
Install dependencies.
npm install
-
Runs the app in the development mode.
npm start
Open http://localhost:3000/hiring-information-overload-website to view it in your browser.
-
To deploy to GitHub Pages:
npm run deploy
The site will be available at https://YOUR_GITHUB_USERNAME.github.io/hiring-information-overload-website/
- This project draws heavily from the GCA website, which was originally developed by Neha Sharma.
- This project uses react-markdown to render the resume information as rich text.
- This project uses react-tabs to create the basic UI.
- This project was bootstrapped with Create React App.
- The site Lorem Markdownum was helpful for creating dummy data for testing purposes.
The HIO site consists of a single Candidate
. The site expects three parameters in the URL. The candidate name
is directly displayed to the participant, while the qualtricsUserId
is used to identify the participant in the digital trace data. Based on the load
parameter, the Candidate
displays 6, 3, or 1 different documents. For easy no-code updating, the documents are provided by the researchers as Markdown files (in /src/ApplicantData
) and rendered as rich text.
Admin
is a bare-bones front-end for researchers to download the digital trace data from Firebase as a helpful CSV file for later import into Stata. The researcher enters the password (as defined in /src/config.js
) and then starts the download. In order to not overwhelm Firebase with requests, the data is downloaded semi-synchronously; it may take a while. The download progress is displayed so researchers can be assured things are working right.
The Candidate
logs to Firebase every time the user clicks and or scrolls the HIO website. Admin
produces a CSV file, which can be opened in any spreadsheet program for easy viewing. The CSV has 8 columns:
-
activityID
is the identifier (within the participant) for this piece of digital trace data. They are generated sequentially, so can be used to determine order of user activities. -
qualtricsUserId
is the Qualtrics ResponseID, passed by Qualtrics to the<iframe>
. -
timeReadable
is the time of the activity in a human-readable format. -
timestamp
is a timestamp, passed from a native JavaScriptDate
to Firebase as a timestamp. -
category
denotes what kind of activity this is:load
= loading status of the pageclick
= user clicked on a tabscroll
= user scrolled a certain amount
-
value
is the value of this specific action, and depends on thecategory
of the action.-
load
→page_rendered
-
click
→ a number [0,5] corresponding to the tab the user clicked:# Document 0 Resume 1 Cover Letter 2 Initial Interview 3 Skills Test 4 Follow-Up Interview 5 Reference Check
-
-
scroll
→ the percent that the user has scrolled down the page -
description
is a human-readable, more verbose description of the activity, largely for the benefit of the researcher. -
timeEpoch
is the number of miliseconds between 00:00:00 UTC on 1 January 1970 and the time of the action (Unix time). It can be used as a simple way to order actions chronologically.
Hi Claire! Here's the step-by-step info on updating the resume information.
-
Navigate to the place where you want to set up the project.
cd ~/Desktop
-
Clone the repository. This will get all the files on your computer and put them in a folder called
hiring-information-overload-website
.git clone https://github.com/TheFirstQuestion/hiring-information-overload-website.git
-
Set up a GitHub account. GitHub is the place where the code is stored, and where the website is hosted. Let me know what your username is so I can add you to the code repository.
-
Connect
git
to GitHub. You'll talk with GitHub through a command line tool calledgit
. (Each line is a separate command; run them one at a time.)git config --global user.name "your_github_username" git config --global user.email "your_github_email" git config --global credential.helper "cache --timeout=31536000"
-
Navigate to the project.
cd hiring-information-overload-website
-
Follow the steps below. At some point, you'll be prompted for your GitHub username and password. The username is your username, but the password is not your password! Instead, you'll need to:
-
Generate a Personal Access Token. It's like a password, but more safe. Go to your account settings and fill out the fields. You can set the expiration for "Never." Make sure to select the
repo
scope, so you can write to the repository. Paste this token into the password field in the login prompt. (It may not look like anything pasted, but it has!)
-
Navigate to the project.
cd ~/Desktop/hiring-information-overload-website
-
Grab the latest version of the code. It's really important to keep everythhing in sync!
git pull
-
Write the information in Markdown. The easiest way to do this is probably to use an in-browser markdown editor with live preview to make sure you have the syntax correct. Here's a helpful Markdown cheat sheet for reference.
-
Open the document files. You'll need to use a plain-text editor, such as Atom, Sublime Text, or Visual Studio Code to edit the Markdown files.
The Markdown files are all in
/hiring-information-overload-website/src/ApplicantData
. -
Copy/paste the Markdown into each file. Select all, paste, save, and repeat.
-
Save your changes.
git add . && git commit -m 'a message about what you changed'
-
Publish your changes. The previous step saved the changes on your computer; now, you need to update the central code repository.
git push origin main
-
Deploy the website. You've updated the repository, so now you need to tell the website that an update is available.
npm run deploy
-
Check to make sure it worked. The website may take a few minutes to update. Make sure everything looks the way it should - if not, let me know!