bhaavvya / quiz

Quiz App 🚀

THIS REPO IS READY FOR HacktoberFest-23 You can start contributing !!!

Use this project to make your first contribution to an open source project on GitHub. Practice making your first pull request to a public repository before doing the real thing!

Celebrate Hacktoberfest by getting involved in the open source community by completing some simple tasks in this project.

This repository is open to all members of the GitHub community. Any member can contribute to this project.

New to Open Source ? No worries I will teach you how to contribute :

What is Hacktoberfest?

A month-long celebration from October 1st - 31st sponsored by Digital Ocean and GitHub to get people involved in Open Source. Create your very first pull request to any public repository on GitHub and contribute to the open source developer community.

https://hacktoberfest.digitalocean.com/

How to contribute to this project

Here are 3 quick ways to contribute to this project:

1. ⭐Star the Project.
2. Connect with Project Admin on Linkedin : https://www.linkedin.com/in/bhavya-verma-754983247/
3. Raise an issue
4. Make a pull request and wait for it to be merged!
5. Add your name to the CONTRIBUTORS.md file.

Getting started

1. Fork this repository (Click the Fork button in the top right of this page, click your Profile Image)
2. Clone your fork down to your local machine

git clone https://github.com/your-username/hacktoberfest.git

3. Create a branch

git checkout -b branch-name

4. Make your changes (choose from any task below)
5. Commit and push

git add .
git commit -m 'Commit message'
git push origin branch-name

6. Create a new pull request from your forked repository (Click the New Pull Request button located at the top of your repo)
7. Wait for your PR review and merge approval!
8. Star this repository if you had fun!

Contribution.md File should include

1. Add your name

Add your name to the CONTRIBUTORS.md file using the below convention:

#### Name: [YOUR NAME](GitHub link)
- Place: City, State, Country
- Bio: Who are you?
- GitHub: [GitHub account name](GitHub link)

2. Add a profile page

Add a Your_Name.md file to the profiles directory. Use any combination of content and Markdown you'd like. Here is an example:

# Your Name
Location

Your City/Country
Academics

Your School
Interests


Some Things You Like

Development


Inventor of the My Pillow

Projects


[My Project](GitHub Link) Short Description

Profile Link

[Your Name](GitHub Link)

BONUS!

• See profiles submitted by fellow coders from around the globe.
• Discover some obscure to new and trending languages.
• New to Open Source ? No worries I will teach you how to contribute :
• Connect with Project Admin on Linkedin : https://www.linkedin.com/in/bhavya-verma-754983247/

quiz's Issues

[BUG] On hover buttons shrink.

On hover buttons shrink.

Add more questions in quiz

I would like to add more questions in the quiz. Pls assign this issue under hacktoberfest.

Multiple Question Types, User Profiles, Leaderboards, Social Integration, Categories and Topics.

• Multiple Question Types:
  Multiple Choice Questions (MCQs)
  True/False Questions
  Fill in the Blanks
  Matching Questions
  Short Answer Questions
  Essay Questions

• User Profiles:
  User registration and profiles to track progress and achievements.
  Avatar or profile picture customization.

• Leaderboards:
  Global or friends' leaderboards to compare scores.
  Achievements and badges to motivate users.

• Social Integration:
  Share quiz results on social media platforms.
  Invite friends to challenge them.

• Categories and Topics:
  Organize quizzes by categories or topics (e.g., science, history, movies).
  Allow users to search or filter quizzes based on their interests.

These are some features I think can be implemented in this quiz app. These features will also make user experience better and allow multiple users to use this quiz app. For database and social integration for now we can use firebase.

[BUG] : Website link is working but the styling and the functionality not working

Describe the bug
When you click on the website link it opens but styling and functionality not added.

To Reproduce
Steps to reproduce the behavior:

1. Go to github repo
2. Click on website link
3. see error no styling and no functionality

Expected behavior
it should be applied styling and functionality to play a quiz

Screenshots

chrome_faj0MuCvRb.mp4

it should be look like this

Desktop (please complete the following information):

• OS: [windows 7]
• Browser [chrome]
• Version [Don't Know]

Additional context

i can fix the issue and please assign me

[Feat] : Add some font for better UI experience.

Is your feature request related to a problem? Please describe.
The font is not looking good please try to add some fonts from google fonts

Describe the solution you'd like
Add a font for better experience you can choose google fonts
suggestion : Roboto, Poppins, Nato Sans.

Plese assign me to fix this feature and also choose any font in given suggestion to add in this project.

Add UI Styles in Quiz page

Is your feature request related to a problem? Please describe.
The UI of this quiz website is not attractive and eye-catching.

Describe the solution you'd like
My solution for the above statement is to add a smooth interface of the quiz website as per the professional look.

@bhaavvya please assign this task to me!

home-page-modification

1.chnage the background of the home page.
2.give animation to start quize button.
pls asign to me

I can add complete user authentication functionality and admin side functionalities

I want to make the user Sign In and Sign Up to enter into the quiz and I can also add the Admin functionality where U can see all the Users and their email and Scores.

Please consider this under HACKTOBERFEST_23 : )

[BUG] : you can enter multiple initials after completing the quiz

Describe the bug
when you complete the quiz you have to enter your initial for leaderboard or to store your name in high score board, you can enter multiple initial at a time

To Reproduce
Steps to reproduce the behavior:

1. Go to home page and complete quiz
2. enter inital name and click on submit button.
3. you can enter multiple initial at a time

Expected behavior
Expected behavior is when user submit you should go in highscore page.

Fix like this

chrome_PVpRJuDZVb.mp4

Screenshots
you can see i enter mulitiple initial after completing the quiz

Error

chrome_Ati8DrQCpk.mp4

Desktop (please complete the following information):

• OS: [windows 7]
• Browser [chrome]
• Version [Don't know]

Additional context
i Have fixed this issue

[Feature] Add a live site link to the readme file

Is your feature request related to a problem? Please describe.
There is no live site link for the contributors to see the progress of website without running on local

Describe the solution you'd like
Add a live site link that is created after the PR #17 was merged

Additional context
After merging and following the steps of PR #17, the site got live but there is no such link in the readme file
I will add it in the readme for the users to check the final website whenever a change is deployed or merged in the repository

Please assign this task to me. Thanks

ADD THE CONTRIBUTORS PHOTOS IN THE README AND CHANGE THE UI UX OF THE README

@veerprakash28 @bhaavvya @sreshtech PLEASE ASSIGN ME THIS ISSUE UNDER HACKOCTOBER FEST

I want to add the backend for this using Nodejs, Mongodb by creating User authentication and some functionalities

I can add Backend Nodejs, MongoDB before the start of the Quiz , user should Sign In and
I can also add the Admin functionalities Like displaying all the Users , Scores etc.

Please assign this to me under HACKTOBERFEST_23 : )

Time goes to negative.

Time goes negative if the quiz is not finished.
Hi @bhaavvya Pls assign this issue to me.

[BUG] : script.js file not linked properly

There is the bug in linking the script.js with the index.html.
I want to fix that issue.
Pls assign this issue to me.

Favicon and Homepage Design

There is no favicon for this project and the homepage is also not much welcoming. I would like to design and improve both. Please assign this issue to me for hacktoberfest.
PS - I saw another issue on improving the UI. If required, I can also help with the UI.

The page can be modified with simple dark/light theme feature .

Is your feature request related to a problem? Please describe.
The UI of this quiz website is not attractive and eye-catching.

Describe the solution you'd like

1. A website Icon is added.
2. An illustration is added at the right bottom corner which makes the website page look better.
3. A cursor pointer is added to all the buttons.
4. A dark/light theme toggle button is added.
5. Navbar width is increased

Quiz.Project.-.Google.Chrome.2023-10-02.23-15-17.mp4

Pls assign this issue to me and,
Please tag this issue under hacktoberfest and merge my pull request.

Want to add LICENSE and CODE_OF_CONDUCT.md to your repo

@bhaavvya Assign me this under hacktoberfest

[BUG]

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[BUG] : Incorrect display of score

Negative score shown or less score shown when all answers are correct.

Hi! @bhaavvya I want to fix this issue.
Pls assign this issue to me.

adding better style and design to the web page

want to add more style to the website of the quiz and would try to make it better..assign it to me

Alert does not have an option

The alert message does not have a cancel button. The user is forced to click okay anytime a prompt displays

Describe the solution you'd like

Using confirm() instead of alert() can help fix this. The image below is the modification I made.

Describe alternatives you've considered

I just made a pull request with the modification I made. By using a confirm method and an if statement the application will be more user-friendly.

Animate the Coding Quiz Challenge .

assign me .

[FEAT]: RESET BUTTON

If i messed up i need to reset my test and start again.

Will add a reset button below question card.

Add it to the navigation bar as well.

Adding share your score option

Is your feature request related to a problem? Please describe.
Yes the feature request is related to a problem as when a person does well in any quiz he or she always wants to share on their social media platforms so that all their connections and other people can know the proficiency of that person

Describe the solution you'd like
I would like to add share your score feature to the website my providing some options of social media like LinkedIn, Twitter etc.

Describe alternatives you've considered
We can test the sharing links to ensure that they are working correctly.

**Additional context
Raised an issue please kindly assign me to this :)

[BUG] The Navbar's width is not 100% at certain screen sizes.

The Navbar is not taking up the 100% width of the site. Even the website is not responsive.

It is expected to take up the full width even at mobile screens

@bhaavvya Kindly Allow me to fix this issue

Feature: Live Site Link of Quiz App

Is your feature request related to a problem? Please describe.
The site is not live and we have to clone it first to see what is happening in this

Describe the solution you'd like
Changing the path and some settings in the directory will make it live

Describe alternatives you've considered
We can also deploy the site on any other platform like versel, etc. but for now github pages will work fine

Additional context
Raised a PR for fixing the issue

Add Footer

Is your feature request related to a problem? Please describe.
Footers are added to:

Provide identification and document details.
Aid in navigation.
Offer contact information.
Display legal notices.
Reinforce branding.
Present calls to action.

Want to integrate API for questions

Currently the questions of the quiz are hard-coded which is surely not the good practice. So I want to integrate some API so that every time new questions comes. Also at the end of quiz user can review his performance. Check the answers of those which he missed / marked incorrect.

So I'd request you to please assign it to me. I am a beginner in JS but I'll try my best to implement all these.
Have a nice day !!