[feature]: Randomly choose a surah or ayah for revision

[MFauzanAP]

Is there an existing issue for this feature?

• [X] There is no exsiting issue for this feature

Summary

Bismillah Al-Rahman Al-Rahim, As salaam alaykum all.

Background

For context, I use this website a lot for memorizing and revising the Qur'an. However, I noticed that there is no option to randomly choose a surah or ayah that you've previously read. Maybe I'm looking in the wrong places, but I've tried searching for it in the home page, sidebar, footer, command bar, etc, but there does not seem to be an option for this to my knowledge.

How will this improve the current experience?

Many muslims use this app for memorization as well, I think it would be a good decision to allow users to solidify their memorization of the Qur'an by having the website randomly choose a surah for them to recite, or an ayah for them to continue from. From personal experience, I've found this way of revision to be quite helpful, and I think others will feel the same.

Furthermore, there may be those who choose to pick a random surah to recite after every salah, or to choose a random ayah to learn the tafsir of. This feature could be beneficial to many people, both for people trying to memorize, and others with different intentions. I think giving them all this feature would be a good idea.

---

I plan on taking a look at the codebase and trying to implement this feature soon insyaAllah. I will attach a PR here once ready. May Allah reward you all greatly for your contributions.

Your purposed solution for this feature

Where should the user access this feature?

I have a few ideas in mind:

1. Adding a group to the command bar above the existing navigating-to group, with each item being one of the following: a. Any surah b. Any ayah c. Previously read surah d. Previously read ayah This would look something like this:

   

2. Adding a button next to the quick links that shows the previous options when clicking on a dropdown. Clicking on the larger button would bring the user to the /random page where they can specify which surahs to exclude/include. This button would look like the following:

   

3. A dedicated page (/random) to specify which surahs to exclude/include, would mostly be composed of a list and checkboxes next to each item. Each surah would correspond to one item, and the user can also specify until which verse to include with a simple number input. Additionally, a weighting could be given based on a simple rating (memorized, some memorization needed, needs work) to prioritize certain surahs over others. The settings set in this page would be remembered for future visits, with a fallback to the surahs the user has previously read.

How would this be implemented?

Firstly, implementing the any random surah/ayah picker wouldn't be too complicated. My plan for implementing this would be similar to the following:

1. Pick a random surah (number) from the 114 surahs
2. If searching for ayah, look up the number of verses of the chosen surah from ./data/chapters/[locale].json
3. Navigate to /[surah]?startingVerse=[ayah]

As for implementing any previously read surah/ayah, I'm thinking of extending the readingTracker slice to include previously read surahs as well, since currently it stores both the surahs and the verse. The new version would keep track of which surahs have been opened as a simple list of objects, with each object having properties for the key, last read verse, and last time it was opened.

{
  "key": "mulk",
  "lastRead" : 5,
  "timestamp": 1692160170841
}

This way, the random picker would just need to pick a random index from this list, and then pick a random number from 1 to lastRead.

The /random page would first check if it has previously been set before, if not, it would default back to this list and set the UI to match it. After the user has set their preferences and started the randomization process, the website should remember the options and create a new key under the readingTracker called randomList which stores this data for future visits.

Future work

Some additional work could be done in the future to improve this feature:

1. After picking a random list, the user should be able to keep clicking random in the Qur'an reader to continue choosing from that list
2. The user could directly specify which surahs he has trouble with based on a rating, and the website would prioritise these choices more
3. Randomly choose juz or hizb to read

[MFauzanAP]

I'm thinking of extending the readingTracker slice to include previously read surahs as well, since currently it stores both the surahs and the verse

For this point, would it be better to improve on the existing recentReadingSessions key under the readingTracker slice or create a new key? The reason for this is because in the existing solution, sometimes there are duplicates of the same surah in the recently read section as seen in the below image.

I'm not sure how it's currently being done, but I think it would be best to have the website monitor the last read ayah of the surah. Maybe it could try tracking the furthest ayah visited by the user, or it could track which ayah the user was on when he left the page. Any thoughts on this?

[SaabK]

I agree with you on this feature. Have you implemented it yet?

[MFauzanAP]

I agree with you on this feature. Have you implemented it yet?

Currently I have implemented the UI and logic for randomly picking a surah using the command bar and on the home page.

Now, I'm looking to refactor the readingTracker slice to make it easier to keep track of which surahs have been read and up to which ayah. This will allow the user to only pick from surahs they have read.

I'll also look into adding a new page/modal where they can hand-pick which surahs they want in the randomizer, but this will be later on insyaAllah.

[SaabK]

Nice. I am no expert but if you think I can contribute, I am ready.

You look like an expert to me. Will you help mentor me? ☺️

[MFauzanAP]

Nice. I am no expert but if you think I can contribute, I am ready.

You look like an expert to me. Will you help mentor me? ☺️

Unfortunately, I am no expert 😅.

If you'd like to contribute to this project, here are some ideas you could implement:

• Add word-by-word translation
• Add a new mode besides translation and reading which hides the arabic text only and shows the translation, this will be helpful for revision + learning the meaning behind the ayat

[amro-youssef]

Firstly, implementing the any random surah/ayah picker wouldn't be too complicated. My plan for implementing this would be similar to the following:

1. Pick a random surah (number) from the 114 surahs
2. If searching for ayah, look up the number of verses of the chosen surah from ./data/chapters/[locale].json
3. Navigate to /[surah]?startingVerse=[ayah]

I think this is a great idea, however I wouldn't agree with picking a random surah number from the 114 surahs. Some verses would be much more likely to be selected than others, for example a verse in surah al fatihah would have a much higher chance of being picked than one in surah al baqara using that method.

I believe it would be better for the surah to be randomly chosen _in _proportion__ with how many verses the surah has (i.e. a surah with 10 verses should be double as likely to be chosen as one with 5 verses).