This project is an interactive poll widget built using React. It includes a fun and animated Pac-Man themed poll component. The widget can handle multiple sets of questions and options, and allows users to vote using both mouse clicks and keyboard navigation.
- Display a simple poll with configurable questions and options.
- Handle multiple sets of questions.
- Save and display votes for each question independently.
- Animated Pac-Man theme for voting.
- Keyboard and mouse interaction for voting.
- Votes are saved in local storage.
- Lightweight and easily embeddable into HTML pages.
These instructions will help you set up the project on your local machine for development and testing purposes.
Make sure you have the following installed on your machine:
- Node.js
- npm (Node Package Manager)
-
Clone the repository to your local machine:
git clone https://github.com/devapurva/poll-widget.git
-
Navigate to the project directory:
cd poll-widget -
Install the dependencies:
npm install
-
Start the development server:
npm start
The application will be available at
http://localhost:3000.
To create a production build of the project, run:
npm run buildThe production-ready files will be in the build directory.
To embed the poll widget in an HTML page, follow these steps:
-
Build the project as described above.
npm run build
-
Copy the contents of the build directory to your web server.
-
Include the following script in your HTML page:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Poll Widget Test</title> </head> <body> <div id="poll-widget-container"></div> <script src="/static/js/main.js"></script> <script> const questions = [ { question: 'How do you feel today?', options: ['Brilliant! I have so much energy', 'Always can be worse.', 'Please, end my misery.'], }, { question: 'How do you like the Opinary test?', options: ['It was great and so challenging.', 'Not bad, but you can improve.', 'It was a nightmare, never again.'], }, ]; mountWidget('poll-widget-container', questions, 'pacman'); </script> </body> </html>
You can configure the questions and options by modifying the questions array in the script tag of your HTML page.
To run the unit tests, use the following command:
npm testThe tests are written using Jest and React Testing Library.
To test the test.html file locally:
- Install
http-serverglobally if you haven't already:npm install -g http-server
- Build the project:
npm install -g http-server
- Navigate to the
builddirectory:cd build - Start the server using
http-server:npx http-server ./
- Open
http://localhost:8080/test.htmlin your browser to see the poll widget.
The main components of the project are:
Poll.tsx: The main poll component that handles multiple questions and options.PacmanPoll.tsx: The Pac-Man themed poll component.index.tsx: The entry point of the application.index.css: The main stylesheet.assets: Directory containing the images used for the Pac-Man animation.
This project is licensed under the MIT License.
Apurva Wadekar