TODO Alternatives

TODO reviews and mentions

• In the face of preservation, only the last hour of the day of the candles can get what we could consider an image of the proper definition of a cuticle.
  1 project | /r/LibraryofBabel | 23 Aug 2022

  I think I'm done with the CSS for the start screen. I want the screens to slide like what I did with https://kxrn0.github.io/Tic-tac-toe-game/dist/ (which has a bug, that I think I can easily fix with changing a variable on load screen, but haven't bothered to fix), but I think that may be a bit difficult, since I'm using React now. I can implement the sliding the same way I did in the link above, but then the start screen would be rendered for every state transition, which doesn't sound like too much of an issue here, but if I were making a more complex app, having to rerender many screens that are out of view every time the state of the main app changes may affect performance. What I immediately thing of is this 1. create a state variable for the main app, that is true when the start screen is being shown 2. add an event listener to the start button 3. when the start button is pressed, add a class to the main screen that slides it out 4. then set a time out equal to how long it takes for the screen to slide out 5. once the time is over, change the state variable to false The start screen will be rendered conditionally based on the state of the main app. I would have to do something similar to bring back the screen. What kind of data does the main app hold? Fow now I'll test the main button to show and hide the start screen. I will pass a function from the main app to the start screen component. When the start button in the start screen component is pressed, that function will be called. In there, the data of the main app will be set, and the start screen will be hidden. how will the main app data be set there? I still have to think about it a bit more, for now I'll focus on hidding the start screen. Looks like I will need two state variables for hidding the start screen; the first will be for adding the class to hide the component, and the second will be for unmounting the component. The mounted state will only be used inside of the main app, the hidden state variable will be passed down to the start screen. So what happens when the user clicks the start button? the start screen component calls the function that it's passed down through props, inside of this function, a setter function is called, which sets state variables that indicate what kind of questions to query from the API. I will set up a useEffect with that data as a dependency, so everytime it's updated, new questions will be generated. For now I'll just log the data to the console. I can make API calls and I do get the required data, but I need to make it so that the start screen determines the shape of the query. For that I need to set the data in the function that hides the start screen. So I will keep variables for the values of the inputs in the state of the screen component. How do I do this? I have a set of checkboxes, and I want to keep an array in the state of the component, the array holds strings which are the values of the checkboxes that are checked, os whenever I click a checkbox, if the checkbox is checked, I will add its value to the state array, otherwise I will set the state array to the result of filtering out the string in the array whose vaule is equal to the value of the array. I need to keep track of the number of correct answers, for that I guess I'll create a state variable in the main app, then pass a function to each question component, so that every time an option is clicked, it calls that function, which updates the number of correct answers in the main app. I need a different way to keep track of the number of correct answers. At first it was just a variable that increased each time the user selected a correct answer, and decreased each tim the user selected an incorrect one. But this doesn't work, since the user can press the correct answer as many times as they want and get a very large number of correct answers. Instead, I'll need to find a better way to store the answers. Perhaps the answers variable is an array of objects, each object has the id of the question, the correct answer, and the user's answer, then when one choice is clicked, this variable is updated. When the quiz is over, I want to display the choices differently. The radio buttons will be disabled, and the correct answer will be given different styling. The incorrect answers will also be given different stylings. So how am I going to do this? There is a state variable in the main app that indicates if the user has finished the quiz or not. I can use that variable in the question components to conditionally render a class that applies the necessary styles. What about the correct answer and the user's answer? A question object that is passed to a question component has a question field tha holds the string for the question, it also has an array of strings which are the choices, and it has a string variable for the correct answer. How will I know the user's answer? I can pass down a variable to the question component to the main app, but I think a better way would be to keep a state variable in the question component. This state variable has a value of the value of the checked radio button, and only the button with this value will be checked. For this I would need the user to have answered all questions, so there should be a way in the parent component to prevent the user from finishing the quiz before all questions have been answered. I think the answers variable will serve that purpose; if answers.length < questions.length; show an error message to the user asking them to finish all the questions. So now I have all answers, and the correct answer as well, when I'm mapping the question data to create the radio buttons, if the quiz is over, and if the current choice value is equal to the value of the selected state variable; then add a class to this particular radio button, which will indicate that this one holds the correct answer. The correct one is styled correctly, how do I add a class to the wrong one? If the selected is equal to choice and selected is different from question.answer; then this is the wrong hole. I think that's it for this. As always, CSS feels a bit hacky, but I think that's how CSS is s'pposed to be. I think I would like to implement another three features before I can consider this as finished. 1. I want to force the user to enter a number of questions and select at least one category before submitting. 2. I would like to force the user to answer all questions before they can finish the quiz. 3. Finally, I'd like to add a loading screen before the questions are loaded. I know that due how I'm quering the questions sometimes I may get repeated questions, but that's a result of selecting too few categories, so for now I'll overlook that. I wanted to add the loading spinner that I used in https://github.com/kxrn0/TODO/blob/main/src/empty_period.js#L78, but it looked a bit complicated, so I decided to go for a premade one that I found online. I think I may be done with this. It looks a bit squished on mobile, and I think I need to learn more stuff, but all in all it's quite decent for my first solo React app. https://kxrn0.github.io/Quiz-App/