prakhartiwari0 / arito Goto Github PK

Describe the bug
After some testing I discovered that there are some sound issues both on the Safari 16 browser for iOS and Mac.
The issues described on #19 will not be mentioned here since they generally apply to all devices.
I have observed that both the Safari 16 browsers on Mac and iOS have no background music playing after pressing the "LET'S START" button on the homepage. The only audible sound prior to reaching the exercises comes from pressing the 'GET SET GO!!!' and 'Start Now!' buttons. On the Safari 16 browser for iOS the volume cannot be adjusted whereas on the Safari 16 browser for Mac the volume can be adjusted. After some more testing I also discovered that the sound related issues on Mac are not present when using a browser like Google Chrome which lead me to believe that this issue is related to the Safari 16.

To Reproduce on iOS
Steps to reproduce the behaviour:

1. Go to https://arito.netlify.app on the Safari 16 browser
2. Click on the "LET'S START" button
3. Notice that there is not background music on the current page
4. Fill in your name, select a difficulty and choose how many questions you want to answer (negative marking is optional)
5. Click on the 'GET SET GO!!!' button
6. Observe that there is also no sound playing on this current page
7. Press the 'Start Now!' button
8. Attempt changing the volume - notice that there is no change

To Reproduce on Mac
Steps to reproduce the behaviour:

1. Go to https://arito.netlify.app on the Safari 16 browser
2. Click on the "LET'S START" button
3. Notice that there is not background music on the current page
4. Fill in your name, select a difficulty and choose how many questions you want to answer (negative marking is optional)
5. Click on the 'GET SET GO!!!' button
6. Observe that there is also no sound playing on this current page

Expected behavior
The background music should start playing automatically after clicking the "LET'S START" button as shown in the Demo Video.

Screenshots or Videos

• Safari 16 on iOS
• Safari 16 on macOS
• Google Chrome on macOS

Desktop:

• OS: macOS
• Browser: Safari
• Version: 16

Smartphone:

• Device: iPhone
• OS: iOS16
• Browser: Safari
• Version: 16

Additional context
Since these two issues share some similarity it is likely that once issues related to the background music not playing are solved on one device that those issues will be resolved for both. The issue on iOS where the volume cannot be adjusted is separate however.

What improvement are you suggesting?

We should remove this blue highlight that appears when we click on links/buttons.

Why should make this improvement?

It annoys the user.

How can we make these improvements?

You can add:

-webkit-tap-highlight-color: transparent;

You can also add this to your stylesheets to define it globally:

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Source: Stackoverflow

Additional Context

Is your feature request related to a problem? Please describe.
It will be better if we can have a functionality of controlling the volume using the two sound icons present beside the slider. They can be used to directly make the volume zero or maximum.

Describe the solution you'd like
We can make them clickable and attach a function of muting & maximizing the volume to them.

What improvement are you suggesting?

If the answer given is too long, they expand past the answer box and overlap

Why should make this improvement?

Clogs up answer page and looks terrible

How can we make these improvements?

Either add an overflow scroll for the entire box or just for the answer portion
Wrap text to the next line (This can change the box size might be the less ideal solution)

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Apart from addition, and subtraction we can add features like finding the power of a number and square root which helps in improving cognitive skills in kids.

Describe the solution you'd like
A clear and concise description of what you want to happen.
As we have done addition and subtraction we can also add similar functionality to power and square root

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
It's straight forward implementation.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
The game would be interesting if we add a timer to hard problems. It will create some tension which helps in time management and getting habituated to competitive exams.

Describe the solution you'd like
I want to add a certain time limit set to questions on hard and very hard levels. When the timer goes to 0 then the user will be going to the next question.

Describe alternatives you've considered
An Alternative is if the user doesn't complete the question in a given time he will be awarded 0 marks for that question.

Additional context
Add any other context or screenshots about the feature request here.

Describe the bug
I have tested and found that the background music which is supposed to be played automatically when we open the homepage, is NOT PLAYING.
And this error in the console is coming -

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD

I did a little bit of research and found that Autoplay with sound is allowed if the user has interacted with the domain (click, tap, etc.).. For more info read Autoplay policy in Chrome.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://arito.netlify.app
2. Notice there is no background music being played (if it is played, it may be due to extensions in your browser)
3. Try to reproduce on a browser with no extensions or temporarily disable all the extensions.

Expected behavior
The background music should start playing automatically when the app is opened as shown in the Demo Video.

Screenshots
Watch the Demo Video and see that the background music is playing, it was because of a live server extension in VS code. But the same thing is not happening in the app when there is no user interaction or extensions that could interact with the website.

Desktop:

• Ubuntu
• Brave Browser
• v0.1

Additional context
This problem may get solved when we add the sound buttons functionality as explained in issue #13. We can keep the music muted by default, and when the user clicks on the buttons it will be an interaction and the music will start playing.

What improvement are you suggesting?

Adding a few lines in the "Getting Your Changes Reviewed" section and changing its format to a more easy-to-understand way.

Why should make this improvement?

Easy for beginners to understand the process of post-contribution workflow

How can we make these improvements?

I would like to be assigned to work on the contributions.md file and I would work on with basic markdown syntax

Additional Context

Hey @prakhartiwari0, its me from the collaboration 🤝 channel

What improvement are you suggesting?

There must a button such as "SAVE RESULT" for saving the results of the test.

Why should make this improvement?

This improvement is required as when we try to take a new test the results of the previous test gets lost

How can we make these improvements?

I can do this by adding a new button to save the result.

Please assign it to me under GSSoC-23.

Describe the bug
In the mobile version of the Arito Website, I have observed that both the "Vote on Product hunt" and "Share on Twitter" are compressed, They are not in a single line and I feel this looks bad and spoils the look of the website.

Expected behavior
Both the "Vote on product hunt" and "Share on Twitter" must be in a single line so that website looks good in the mobile version as well.

Screenshots

I would like to work on this Bug.

What improvement are you suggesting?

Hey, @prakhartiwari0 I want to improve the UI of the project a little bit so that it looks clean. For now, it is looking somewhat cluttered. Please assign me this issue. Thank you!

Why should make this improvement?

Improving the font and styles of the button. Add a footer and Header.

How can we make these improvements?

Describe the process or the changes we should do to make these improvements

Additional Context

Write if you have anything more to say, or if you want to add screenshots, links, or videos.

user is not able to refresh the page automatically using the button. he/she has to reload the page manually

What improvement are you suggesting?

I would like to add a scroll to the top button.

Why should make this improvement?

It will help in enhancing the user experience.

How can we make these improvements?

I will simply add a function that will take the user back to the top whenever the user clicks on the button. Also, the button will become accessible only when the user scrolls the window more than 20-30 px.

We can have the following improvements in the Readme file -

• Add latest Screenshots inside the table (Replace older ones if required)
• Add more details about the project
• Add a Contributors Section

Any more suggestions are welcome!

Is your feature request related to a problem? Please describe.
Sometimes we want to stop the background music or the sounds of button clicks of the app but not decrease the volume of our device. This leads to irritation because there is no option for mute/unmute sounds or volume control in the app itself

Describe the solution you'd like
It would be handy if the app itself contains buttons to disable/enable music/sounds.
Adding a volume control button will also be good.

Additional context

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.

Describe the bug
If you attempt to send in an answer that overflows the text box the answer button does nothing

To Reproduce
Steps to reproduce the behavior:

1. Create a quiz
2. Attempt to answer a question but fill the textbox so it begins to overflow

Expected behavior
Either the answer should be put through or there should be some type of indication that the length of you answer exceeds the maximum

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 107.0.5304.107

Also, I was thinking will it better if we provide the user with an option to resume the test or not.
Because if the user doesn't want to resume the test, they will be able to discard it.

What do you think about this? @Anan7Codes
And can you implement this feature?

Originally posted by @prakhartiwari0 in #53 (comment)

I would like to work on this feature.

Is your feature request related to a problem? Please describe.
There must a footer included in this project.

Describe the solution you'd like
A footer containing the link of different social media handles so that the user can connect to the author, and button to move to the beginning of the page. Also, I can add anything more in the footer section if you suggest.

Please assign it to me under GSSOC'23.

Describe the bug
I have noticed that when doing small-number questions, sometimes the same question is repeated.

To Reproduce
Steps to reproduce the behavior:

1. Go to Arito
2. Choose a Very Easy level
3. Start the test
4. Do this multiple times till you get any repeated question

Expected behavior
Every question should be unique for a genuine result to come

Screenshots

Desktop (please complete the following information):

• Ubuntu
• Brave Browser
• Version v1.5.1

Describe the bug
All the progress of the test gets lost when we click on the back button in the mobile browser or reload/close the tab on the desktop browser.

To Reproduce
Steps to reproduce the behavior:

1. Go to Arito website
2. Start a test
3. Press back button/close tab/reload
4. All progress is lost!

Expected behavior
We should either save the progress somehow or at least add an ask before closing the dialogue box so that the progress loss can be prevented in case of the tab is closed/reloaded mistakenly by the user.

Desktop (please complete the following information):

• Ubuntu
• Brave Latest
• Latest Version of app

Smartphone (please complete the following information):

• Samsung
• Chrome browser
• Latest App version

          Mistakenly added this image to the file, kindly remove it. @Hrishi5111998

Originally posted by @prakhartiwari0 in #68 (comment)

Describe the bug
There is an odd background of the Volume Bar, which is looking bad on the Results Page.

To Reproduce
Steps to reproduce the behavior:

1. Go to the app
2. Give the test (details don't matter here)
3. Scroll down to the bottom
4. See the styling bug

Expected behavior
The volume bar should also have the same background as the rest of the Results Page.

Screenshots

Desktop (please complete the following information):

• Ubuntu
• Brave Latest
• v1.3.1

Theme Bugs on Dark Mode :(
Hey! I think you should add a dark mode theme too on the website, people who use forced dark modes can really find the website very ugly compared to light mode.

To Reproduce
Steps to reproduce the behavior:

1. Force your browser to make every site dark mode.
2. Visit the Arito site

Expected behavior
For dark mode users, it's expected that the site should either automatically change to the dark theme or at least have a button to switch between dark/light modes :)

Screenshots

Smartphone:

• OS: [Android OS]
• Browser [Firefox Nightly for Developers]
• Version [Latest]

Solutions

1. You can add a button to switch b/w dark & light modes.

2. You can use prefers-color-scheme property of CSS.

3. THE BEST ONE! add both options 1 & 2.

Hello,
I suggest adding an alert or a short message that would inform the user of which gap needs to be filled when something is missing on the "Fill them" page. This would improve the user experience and make it more intuitive. For example, if the user forgets to enter the number of questions after clicking the "Get set go" button, the app could show a message such as "Please enter the number of questions" as a prompt.

It would be nice to skip a question without solving them

What improvement are you suggesting?

Adding a footer to incorporate all the links mentioned in the site will give it an organised look.

Why should make this improvement?

The website will look more organised and will become more appealing.

How can we make these improvements?

We take the mentioned links and add a horizontal footer to incorporate them all.

Additional Context

Since the website is primarily meant for kids to learn basic math, a custom arrow would add more impact. Since the entire UI is created to appeal to kids and keep them engaged, adding a custom cursor similar to the ones we generally find in online games would be good, in my opinion.

If the idea is good, I would like to work on this feature

When we complete our work
there is restarts button which not work
and always we want to restart
problem in that is when we checked f5(restart)
always come msg that change made is not save

suggestions is that fix this
or make login page and give each one option for saving there work (Like in points)

add calculus in it

Is your feature request related to a problem? Please describe.
PROBLEM 1
When we are giving the test, we sometimes quickly press ENTER key as we have a habit of that in other tasks, but there is no functionality to submit the answer and go to the next question when ENTER key is pressed.

PROBLEM 2
The input tag in the TEST PAGE is not automatically focused when a new question is loaded, this results in irritation as the user needs to click again and again to type the answers into the input field.

Describe the solution you'd like
SOLUTION 1
We can add an event listener to the DONE button on the test page which will run the same function which is run on click, whenever we press ENTER key.

SOLUTION 2
We can put autofocus attribute inside the required HTML input tag of the test page.

Describe the bug
When I am clicking on the "Share on Twitter" button on the website, its redirecting me to twitter.com but twitter.com is unable to handle this request and it's showing HTTP error 500. I pressed reload button 4-5 times still it's showing the same error.

Screenshots

I would like to work on this bug.

What improvement are you suggesting?

with out reloading the web page by click on that button we assign click event redirect to that starting page.

Why should make this improvement?

user no need to got to reload.

How can we make these improvements?

simply by routing

Additional Context

if it is not suitable update please update me i am a beginner.

Improvement: The sound controls option in main.html is at the bottom of the page and requires the user to scroll down and search for the controls. It would be more user friendly to place the sound controls at the top of the page (preferably on top right)

As the music is automatically turned on when we land into main.html, it might be uncomfortable if the sound controls are placed somewhere below and are not readily available to turn off or reduce volume when the user is in a public place.

If this improvement is relevant, I would love to work on this issue

Is your feature request related to a problem? Please describe.
Sometimes we want to go to previous questions that we attempted, either to check our solution or maybe we moved to the next question by mistake, but there is no functionality for that.

Describe the solution you'd like
We can have two buttons, one on the top left and the other on the top right corner of our app, which can be used for navigation. The left one will navigate us to previous questions, and the right will be used to move to the question after the current one.

Additional context
A visual representation (just an example) of the buttons -

I think name should persist i.e I should not need to fill in my name when taking a new test. Also volume should persist too.(In my opinion).
You can assign me this one :)

Is your feature request related to a problem? Please describe.
When we give tests, it is good to get the data of how much time was consumed so that we can get an estimate of our skill level and can improve upon that.

Describe the solution you'd like
We can use some time functions in JavaScript and start the time at the start of the test, and end it when the test ends.

It would be great if we could show 2 things -

• Time taken for the whole test
• Average time taken to answer each question

We can calculate this data using mathematics!

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A toggle button to change the site appearance from light to dark and vice -versa

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Is your feature request related to a problem? Please describe.
After enter the game there is no option to Exit the game or return back to dashboard. In this time it's possible with the help of browser.

Describe the solution you'd like
I want to add one like a x sign to Exit the game and a homepage sign for directly return to the dashboard.

Describe alternatives you've considered
Apart from this I've no idea in this moment but any extra suggestion or feature welcome.

Additional context
EG;-

We could add Open Graph tags to the website for better sharing on social media platforms such as Facebook or Twitter. These tags provide important information to these platforms and can improve the appearance of the website when it is shared.

users can't go back to the main page after they have done testing themselves and results displayed.

What improvement are you suggesting?

We can change the text on the homepage, or add/remove links. We can also make layout changes, design or style changes to improve its looks.

Why should make this improvement?

The homepage makes the first impression, so it should be good-looking.

Describe the bug
While addition I found if you try to put any alphabet as an answer you can actually put alphabet 'E ' as an answer
it's an another thing whether it is right or wrong but , the issue here is the normal answer submission feature doesn't work and you answer will not get submitted.
Normally it should be submitted as an wrong answer but it is not getting submitted even by pressing enter multiple time .
To Reproduce
Steps to reproduce the behavior:

1. Go to addition
2. Click on E alphabet on your keyboard
3. Answer will be not submitted
4. No dialogue box or prompt for informing about this issue
5. Done button got jammed too

Screenshots

@prakhartiwari0
Desktop (please complete the following information):

• OS: Windows 11
• Browser Brave

Describe the bug
Dropdown Menu is Out of the browser frame in small screen.

Expected behavior
Menu should inside the frame.

Screenshots

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.

What improvement are you suggesting?

The number of questions input should not allow user to input 0.

Why should we make this improvement?

Users can only add from 1 upwards in the input field adding zero gives the user unlimited question to solve

How can we make these improvements?

Describe the process or the changes we should do to make these improvements

Additional Context

Write if you have anything more to say, or if you want to add screenshots, links, or videos.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.
When the user is playing game ,an option of exit from the game should be used .
I'll create an option to close the game.

Is your feature request related to a problem? Please describe.
There is a dummy button added in the RESULTS PAGE in this PR #8. But as the name suggests, it is just a dummy RETEST button and not a working one, and therefore to avoid confusion it is written in the button to reload the website for giving the test again.

We should have the two buttons on the Results Page - RETEST & NEW TEST

Describe the solution you'd like
The difference between RETEST and NEW TEST button's functions-

Describe alternatives you've considered
We can have a good discussion on what to add and what not.

Contributing Guidelines

It needs a lot of changes in terms of beautification, information, language improvements, and more.

Sections to add:

• Guidelines: This will contain all the guidelines for contributing to the project
• Pull Requests Review Criteria
• Other points to remember while submitting your work(optional)
• Resources

Or any other helpful section

Is your feature request related to a problem? Please describe.
There's no "Back-To-Main-Menu" button on TEST FORM Page

Describe the solution you'd like
Would like to add "Back-To-Main-Menu" button for the same

There is no Home button on results page.
Add a button to get back to home page.