Proposal for Creating a Website with Good UI for JavaScript MCQs

[Zeus2480]

Hi there,

I would like to propose creating a website with a good UI for the MCQs related to JavaScript in this repository. I believe that having a dedicated website will improve the user experience and make it easier for people to test their JavaScript knowledge.

Here's what I plan to include in the website:

A clean and modern UI design that is easy to navigate Multiple choice questions related to JavaScript with options and video explanations links A scoring system to keep track of the user's progress

I have the necessary skills and experience to create this website, and I am confident that it will be a valuable addition to the repository.

Please let me know if you approve of this proposal, and if there are any specific requirements or guidelines that I should follow. I look forward to hearing from you soon.

Thank you for your time and consideration.

[Zeus2480]

If you approve my request I will start working on the UI of the website and after getting your approval for the UI I will start working on the website

[kirandash]

@Zeus2480 That's an amazing idea. It will be an awesome addition to this repository.

Here's my proposed tech stack for the project:

React: For the UI Remix: Framework for the Client/Server/Routing TypeScript: Typed JavaScript (necessary for any project you plan to maintain) XState: State machine tool making complex component state management simple Prisma: Fantastic ORM with stellar migrations and TypeScript client support Express: Node server framework Playwright: E2E testing framework Jest: Unit/Component testing framework Testing Library: Simple utilities for testing DOM-based user interfaces MSW: Fantastic tool for mocking HTTP requests in the browser/node Tailwind CSS: Utility classes for consistent/maintainable styling Postcss: CSS processor (pretty much just use it for autoprefixer and tailwind) Reach UI: A set of accessible UI components every app needs (accordion/tabs/dialog/etc...) ESBuild: JavaScript bundler (used by Remix and mdx-bundler). mdx-bundler: Tool for compiling and bundling MDX for my site content (blog posts and some simple pages). Octokit: Library making interacting with the GitHub API easier. Framer Motion: Great React Animation library Unified: Markdown/HTML parser/transformer/compiler system. Postgres: Battle tested SQL database Redis: In-memory database–key/value store.

Here are the services this site will use:

Fly.io: Hosting platform GitHub Actions: Hosted CI pipeline service Sentry: Error reporting service

Steps:

1. UX Design
2. UI Implementation with static QA
3. Make the QA dynamic and read it from README file so that we don't have to maintain the QA on both README file and the website.
4. Integrate authentication and save user data
5. and much more....

It might seem like a lot of task. But I can already see how amazing it will be. And if you don't know a particular tech stack, it's ok. I can help you on the way. Or we can use something which you are more comfortable with.

@Zeus2480 Please let me know if you have any questions or suggestions. Bdw, you can also text me on discord if you want a faster response.

[kirandash]

If you approve my request I will start working on the UI of the website and after getting your approval for the UI I will start working on the website

Just to be clear, did you mean to create a design for the website? If yes, may I know which tool do you use for creating design

[kirandash]

Following are the tasks to be completed under this issue:

• [ ] Create Design with Figma (To be done by @Zeus2480)
• [ ] Build website with vanilla JS (To be done by @Zeus2480)
• [ ] Deploy website live (To be done by @kirandash)

Title: Who wants to be a javascriptaire

Game Description: Who wants to be a javascriptaire Quiz is an online game where players answer multiple-choice questions in order to win points and become a javascriptaire. The game is based on the popular TV show "Who Wants to Be a Millionaire?" and features lifelines that players can use to help them answer difficult questions.

Gameplay:

• The game consists of multiple-choice questions, each with four possible answers.
• Players have three lifelines they can use to help them answer a question:
  • "50/50": This lifeline eliminates two of the four possible answers, leaving the player with two choices.
  • "Ask the Audience": This lifeline shows the percentage of players who chose each of the four possible answers, allowing the player to see which answer is most popular among the audience. We can simulate this by always giving higher percentage to the correct answer.
  • "Phone a Friend": This lifeline allows the player to call a virtual friend who will provide them with advice on the question.
• The game will not end if user answers wrong. It will continue until either user quits or all questions end. At the end of the game, please show user their final score with four possible messages for four grades: "bad", "average", "good" and "excellent" based on their score.
• Please add buttons to allow user to quit the game or restart the game at any point of time.
• Add a nice gamified music background and also add a button which user can choose to mute the music.

User Interface:

• The game's user interface consists of a question panel, answer choices panel, a lifeline panel, and a score board.
• The question panel displays the current question and its associated points value/score.
• The answer choices panel displays the four possible answers to the question.
• The lifeline panel displays the three available lifelines and their corresponding icons.
• The score board displays the current score out of total score that user can get.

Technical Specifications:

• The game is built using HTML, CSS, and JavaScript.
• The game is supposed to use questions from the README.md file.
• The lifelines and score board are updated dynamically using JavaScript.
• The game tracks the player's progress and updates the scores and lifelines accordingly.
• The game uses cookies to store the player's progress so that they can resume the game later if they leave the page.

Let me know if you have any questions or need further clarification.

[Zeus2480]

Super Excited to work on this amazing project.

[Ar-Akhil]

Love to participate in the build. Do reach out if i can help in any possible way.

thank you.

[kirandash]

Love to participate in the build. Do reach out if i can help in any possible way.

thank you.

Hi @Ar-Akhil , thanks for showing your interest but this task is already assigned to @Zeus2480 but I do have open issues on different open-source projects of mine. Please feel free to have a look at them.

If you still can't find anything then feel free to reach me out on discord and I will be happy to help you out finding some issues per your interest.

Happy Coding!