Retrive data and "validate" that data.

Hi!

Im trying to figure out how i should continue on with my small Quiz app.

I have different Subjects, and they contain (ofc) questions and answers. There are 4 possible answers to a question, but only one is correct. So one table with questions, and one table with answers.

Let´s say that there is 300 questions for a subject. Thats a lot of questions, so i want to give the user a choice of doing 10, 20, 30, 40,50 (or what ever) or all questions.

I see two solutions:

Solution 1 Fetch the desired number of question in a JSON format. With Vue (or any other js) let the user answer the question, display right or wrong. At the end when all questions has been answered, save to DB

Solution 2 Fetch one question at a time, and somehow keep track of how many that has been answered. Save result to DB after every answer.

I want to do solution 1, seems as the user experience with fast load time with JS would be nice, but hard to code. Solution 2 would be easier to code, but inconvenient method. Solution 1 would also be more scaleable if project grows to another platform.

Any helping thoughts?

EDIT: I actually found something similar my expectations: http://jewlofthelotus.github.io/SlickQuiz/