Built a Modern Rice Purity Test Website. Here's My Tech Stack and the Challenges I Faced.

You've probably heard of the Rice Purity Test — it's a self-graded survey that originated at Rice University to gauge a person's level of "innocence" or life experience. I noticed that many existing versions online were full of intrusive ads and had clunky user experiences from the early 2000s.

So, I decided to build a modern, clean, and ad-free version: Rice Purity Test.

I wanted to share my process, the tech stack I used, and a few interesting challenges I ran into. I hope this can be useful, especially for newer developers thinking about their own projects.

🛠️ The Tech Stack

• Frontend: Vanilla HTML, CSS, and JavaScript. For a simple, mostly static site like this, a framework felt like overkill. I wanted it to be incredibly lightweight and fast.
• Styling: Custom CSS with a mobile-first approach. I used CSS Grid and Flexbox for the layout to make it fully responsive on all devices.
• Hosting: GitHub Pages. It's free, simple, and perfect for static sites. The connection is served over HTTPS, which is a must-have.
• Domain: Namecheap for the d domain (ricepurity.info).

⚡ Challenges & Solutions

1. Persisting the Score State: The test has 100 questions. I needed a way to save the user's answers so that if they refreshed the page or left and came back, their progress wouldn't be lost.

Solution: I used the localStorage API. Every time a checkbox is checked or unchecked, the state of all answers is saved to localStorage. On page load, the script checks for saved data and re-populates the test.

1. Calculating the Score Dynamically: The score (a number from 0-100) needed to update in real-time without refreshing the page.

Solution: This was a fun JavaScript logic problem. I attached an event listener to the entire form. Any time a click event happens, the function calculates the score by counting all the checked checkboxes (each "yes" subtracts a point from 100) and updates the displayed score instantly.

// Simplified version of the calculateScore function
function calculateScore() {
const checkboxes = document.querySelectorAll('input[type=checkbox]');
let score = 100;
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
score--;
}
});
document.getElementById('score-value').textContent = score;
}

1. Creating a Shareable Result: I wanted users to be able to share their final score easily.

Solution: I implemented a simple "Share Your Score" button that copies a pre-formatted message (e.g., "I scored a 92/100 on the Rice Purity Test! 🎯 ricepurity.info") to the user's clipboard using the navigator.clipboard.writeText() API.

🚀 What's Next?

• This was a super fun weekend project. Future ideas might include:
• Creating data visualizations of anonymous aggregate score data.
• Adding a "dark mode" toggle (because what modern app doesn't have one?).
• Allowing users to create custom test lists.

Check out the final product here: ricepurity.info

I'd love to hear your feedback! Have you taken the test? What would you have done differently in the tech stack? Let me know in the comments!