One of the things I struggled with while studying coding was using a lot of commands properly. It reminds me of my high school English class, when I kept memorizing new vocabs to use it properly. Making flashcards to memorize it is very classic and useful method that I used to use, so I decided to make my own flashcards to memorize codes. What if, as a software engineer, I could make it into an app?
##Instruction to write quizzes
So I made an app that you can use it for any study! All you need to do is making your own 'quiz', just like writing on flashcards. Below is a brief tutorial of using the app.
1. First, clone down the git repo. 👉 github.com/cyoojin513/flashcard-app
2. Go to db > seeds.rb
When you go to seed.rb, you will see that it is an empty seed. Please make your own quiz in the format as written in the instruction.
(Above is a flashcard I made while studying Rails. Please ignore the contents.
Most of questions will not make sense to you because it's written in my word😂)
3. After completing writing quizzes, you can finally test yourself with a flashcard!
Write rails db:seed in the terminal to store quizzes in the database.
4. Let's run the server to open the flashcard. Write rails s in the terminal to run back-end server, and open a new terminal and write npm start --prefix client to run client-side server. Now you are ready to use your flashcard!
##Flashcard App Tutorial
In the app, you will see some buttons. When you click next, you will see one of your quiz you seeded.
(The quiz datas will be handled by client-side and be generated randomly by the code below.)
const [quiz, setQuiz] = useState("")
const [randNumber, setRandNumber] = useState()
// Fetching data from back-end
function fetchingData() {
fetch('/quizzes')
.then(r => r.json())
.then(data => setQuiz(data))
}
useEffect(() => fetchingData, [])
// Generating a random index number
function generateIndexNum() {
setRandNumber(Math.floor(Math.random() * quiz.length))
}
// Generating a random question
function Questions() {
if(quiz !== "") {
const questions = quiz.map(item => item.question)
return <h3>{ questions[randNumber] }</h3>
}
}
When you submit wrong answer, it will say 'try again' like below.
If you submit correct answer, it would say like this:
If you can't come up with an answer, you can click the
answer button, like flipping a flashcard.
One thing you need to know is that it will not show the next question automatically when you submit the correct answer. It is because I wanted to double check the answer with the question after I submit. If it automatically moves you to next question, you could not check the question and the answer until it's randomly generated. That's the reason why I made the
next button.
If you click
next button, random question will be generated again like above.
##When you find a mistake on your quiz
When you find a mis-spelled question or want to change something, there is an easy way to query the database. When you open the console, it will give you the ID number the current question belongs to, making it easy to search the database.
##Happy coding!
Please check the 'README.md' for a simpler version of instruction. The more you know, the easier and faster everything will be. Hope this helps your study!
