FYI... am new to JavaScript... am new to coding period. I started learning Feb 2024. Haft the time I am lost.
This is a personal project after I completed a Frontend track(course) on Hyperskill. A way to practice.
Inspired by Hyperskill way of presenting problems for students to answer.
This is the 4th pass at rewriting this project. This time around the focus was on OOP, Encapsulation, SRP
This project is a coding challenge platform designed to help users practice and improve their coding skills. The game tracks your progress, providing hints and solutions to help you along the way.
js-practice.webm
- Problem Set Management: Users can load different sets of problems to solve --- Am still working on this.
- Code Editor: An integrated code editor using CodeMirror6 for writing and editing code.
- Solution Checking: Users can check their solutions against expected solutions on Submit/Check.
- Hint System: Provides one to several several hints to help users solve problems, on user request.
- Score Reward/Penalty History Displays a history of applied points, be it + points awarded or - points for penalties.
- Solution Display: Shows the correct solution on user request. This incurs a Penalty
- Scoring System: Keeps track of the user's score based on correct and incorrect answers and penalties if solution or hints are used. Or if a problem is skipped
- Copy to Clipboard: Users can copy the solution to their clipboard for easy access.
- JSON Format: Problems are stored in JSON files, allowing for easy management and expansion of the problem set.
- Dynamic Loading: The application dynamically loads problems from JSON files, providing a flexible way to introduce new problems.
- Code Editor: A CodeMirror-based editor allows users to write and run JavaScript code to solve problem.
- Problem Display: Problems are displayed with instructions and hints, guiding users through the solution process.
- Solution Viewing: Users can view the correct solution on request. 10 points penalty
- Hint Viewing: Users can view hints. Each hint view incurs 1 point penalty
- Scoring System: A scoring system rewards correct answers and penalizes incorrect attempts or viewing solutions prematurely.
- Scoring: Users earn points for correct answers and lose points for incorrect attempts or viewing solutions.
- Game Stats: for tracking how many problems have been solved, how many left to go, how many wrong and so on..
- Penalties: Viewing solutions, hints incurs a penalty, Skipping problems are incur penalties too. Encouraging users to solve problems independently.
- Progress Tracking: The application tracks user progress, displaying scores and penalties to motivate continuous learning.
- +10 Points Awarded for Solving Problems Correctly
- When a player successfully solves a problem (i.e., their solution matches the expected output), they earn 10 points. This encourages players to attempt solving problems and rewards them for correct answers.
- -2 Points Deducted for Failing to Solve Problems...-2 per fail
- : If a player fails to solve a problem (i.e., their solution does not match the expected output), they lose 2 points. This discourages guessing and promotes thoughtful problem-solving.
- -15 Points Deducted for Skipping Problems
- Skipping a problem results in a deduction of 15 points. This penalty is likely intended to discourage skipping problems, emphasizing the importance of engagement and persistence in solving challenges.
- -10 Points Deducted for Peeking at Solutions
- Looking at the solution before attempting to solve the problem results in a loss of 10 points. This discourages cheating and encourages players to rely on their own problem-solving skills.
- -1 Points Deducted for Peeking at Hints
- Using a hint before attempting to solve the problem results in a small deduction of 1 point. This suggests that hints are meant to assist but should not replace independent thinking and problem-solving efforts.
- Loading Problems: The loadAndPresentProblems function fetches problems from JSON files, dynamically updating the UI with new problems.
- Problem Structure: Each problem includes instructions, a hint, the problem statement, arguments, and the expected solution, structured in a JSON object.
- A modern web browser.
- Basic knowledge of HTML, CSS, and JavaScript.
npm install @codemirror/lint
This project is a web-based application and does not require installation. Simply open the index.html file in your web browser.
--- Not really ready for that.
--- xxxxxxxxxxxxxx.
- Dropdown - Change Problem Set: Select any from problem sets, then click Apply button to load the selected problem set.
1. Load a Problem Set: Click the "Change Problem Set" button to load a new set of problems. - Solve Problems: Use the integrated CodeMirror editor to write your solution and click the "Run Script" button to execute it.
- Restart - The restart buttons resets the current problem set, so you can start over
- Reset Problem - Reset code on editor area
- Skip - Skips the current problem and loads the next problem. Incurs Penalty.
- Check: Click the "Check" button to compare your solution with the expected solution. Incurs Penalty/Reward.
- Next: Takes you to next question. Only displayed once the current problem has been solved.
- Show Hint: If you're stuck, click the "Show hint" button to get a hint. Incurs Penalty. Incurs Penalty.
- Show Solution: If you're reallllly stuck, click the "Show Solution" button to get the solution. Incurs Penalty.
note: Once a problem is solved. It is ok to look at hints, and solutions. No penalties will be incurred.
Contributions are welcome If you find a bug or have a feature request, please open an issue or submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
If you have any questions or need further assistance, please open an issue or contact the maintainers.