Finalize a 3-Page Local Quiz App Clone (Node.js / Alpine.js)
Budget: €30 – €250 EUR
I am looking for a developer to finalize a simple 3-page quiz clone application. I am a coder myself and have already built the base project structure, the import scripts, and parts of the second screen, but I lack the time to finish it. This clone is strictly for personal training, will reside exclusively on my local machine, and will never be deployed online. The URL of the original reference site will be provided to the winning bidder so you can mimic the experience, no need for an exact pixel-to-pixel copy.
Tech Stack: EJS, Node.js/Express, Alpine.js, SQLite (local), HTML, CSS, Bootstrap.
You can chose to make a PWA or a single page website, for now I have setup.ejs, quiz.ejs and results.ejs which you can convert into one page if you want to
Core experience:
• Screen 1 (Setup): A configuration page where the user selects how many questions they want from Type 1, Type 2, and Type 3, along with a timer for each (Defaults: 10 mins for Type 1, 20 mins for Type 2, 10 mins for Type 3). Hitting the "START" button makes a call to the local SQLite DB to randomly pick the specified number of questions per type. This screen is HTML completed, the call is not finished and the time is not yes passed onto the second screen
• Screen 2 (Quiz Execution): Displays questions (sometimes containing images) and 4-5 multiple-choice options one by one. It features a countdown timer at the top, along with NEXT, PREV, and Bookmark buttons. Crucial: You will need to implement three specific on-screen tools: Highlight text, a Calculator, and a Scratch Pad, examples will be in the link provided.
• Screen 3 (Results): Triggered when the timer hits 00:00 or the user clicks "SEE RESULTS". This page displays a review of the quiz, showing correct/incorrect answers alongside explanations.
Functional notes
– Database & Data Flow: Before running the app, an npm run import.js script (already partially/fully handled by me) transfers provided JSON files into a local SQLite database.
The JSON contains questions, MCQ answers, correct answers, image references, and explanations. You will receive 3-4 sample JSON files for testing.
– State Management: Question UUIDs, Answer IDs, and user selections are managed in the frontend using Alpine.js state management.
– Starting the App: The app will be run locally via npm run start.
– Current Progress: I have already set up the base project file, the imports, and the foundation of Screen 2. You will be picking up where I left off to wire up the rest and implement the missing features (especially the Screen 2 tools and Screen 3).
Deliverables:
Updated and completed source code (frontend + backend) that flawlessly runs on my local machine.
Fully functional Screen 1 (DB querying/randomization), Screen 2 (including the Highlight, Calculator, and Scratch Pad tools), and Screen 3 (Results + explanations).
Seamless integration with the provided JSON/SQLite data structure, verifiable by running: npm run import.js followed by npm run start to see the flow end-to-end.
Tech Stack: EJS, Node.js/Express, Alpine.js, SQLite (local), HTML, CSS, Bootstrap.
You can chose to make a PWA or a single page website, for now I have setup.ejs, quiz.ejs and results.ejs which you can convert into one page if you want to
Core experience:
• Screen 1 (Setup): A configuration page where the user selects how many questions they want from Type 1, Type 2, and Type 3, along with a timer for each (Defaults: 10 mins for Type 1, 20 mins for Type 2, 10 mins for Type 3). Hitting the "START" button makes a call to the local SQLite DB to randomly pick the specified number of questions per type. This screen is HTML completed, the call is not finished and the time is not yes passed onto the second screen
• Screen 2 (Quiz Execution): Displays questions (sometimes containing images) and 4-5 multiple-choice options one by one. It features a countdown timer at the top, along with NEXT, PREV, and Bookmark buttons. Crucial: You will need to implement three specific on-screen tools: Highlight text, a Calculator, and a Scratch Pad, examples will be in the link provided.
• Screen 3 (Results): Triggered when the timer hits 00:00 or the user clicks "SEE RESULTS". This page displays a review of the quiz, showing correct/incorrect answers alongside explanations.
Functional notes
– Database & Data Flow: Before running the app, an npm run import.js script (already partially/fully handled by me) transfers provided JSON files into a local SQLite database.
The JSON contains questions, MCQ answers, correct answers, image references, and explanations. You will receive 3-4 sample JSON files for testing.
– State Management: Question UUIDs, Answer IDs, and user selections are managed in the frontend using Alpine.js state management.
– Starting the App: The app will be run locally via npm run start.
– Current Progress: I have already set up the base project file, the imports, and the foundation of Screen 2. You will be picking up where I left off to wire up the rest and implement the missing features (especially the Screen 2 tools and Screen 3).
Deliverables:
Updated and completed source code (frontend + backend) that flawlessly runs on my local machine.
Fully functional Screen 1 (DB querying/randomization), Screen 2 (including the Highlight, Calculator, and Scratch Pad tools), and Screen 3 (Results + explanations).
Seamless integration with the provided JSON/SQLite data structure, verifiable by running: npm run import.js followed by npm run start to see the flow end-to-end.
Related categories:
JavaScript
CSS
HTML
Node.js
SQLite
Web Development
Backend Development
Frontend Development
Database Management
Alpine JS