Quiz App With AngularJS and Loopback

Ref: https://github.com/tomchal/Quiz4All
Installation:

  1. Go to your favorite directory and Clone the app
  2. Go to the ‘Quiz4All’ dir
  3. Install the node packages with npm
  4. Go to ‘client’ dir and use bower to install the packages

     
  5. Modify /server/datasources.json file. At ‘TchMySql’, match with your database setting. SORRY, ONLY ADMIN CAN SHOW THIS!
    If you haven’t created the database ‘Quiz4All’, please do it manually (via phpmyadmin?).
    NOTE: Loopback has a functionality to create the tables and fill the data/fixture into the tables when the app run for the first time (create ‘quiz’ table, create ‘user’ table, insert the default user data into the table, etc). It’s called ‘autoMigrate’ (https://loopback.io/doc/en/lb2/Creating-a-database-schema-from-models.html#auto-migrate). It’d run the scripts in /server/boot/ directory like ’02_create-appusers.js’, ’04_load_quizzes.js’, and so on. We know the scripts also load the other scripts to create the tables structure in /common/models/ directory. For example ‘quiz.json’ to create ‘quiz’ table, ‘answer.json’ to create ‘answer’ table, and so on. It’d also fill the tables from the fixture ‘quizDane.js’ in /server/data/ directory. In the above scripts ’02_create-appusers.js’ and ’04_load_quizzes.js’, there is a line responsible to do that (create table, fill the tables with the fixtures) when the app is starting. For example:

    The loopback link above says:
    If there are existing tables in a database, running autoMigrate() will drop and re-create the tables: Therefore, data will be lost. To avoid this problem use auto-update(). Instead of dropping tables and recreating them, autoupdate() calculates the difference between the LoopBack model and the database table definition and alters the table accordingly. This way, the column data will be kept as long as the property is not deleted from the model.“.
    BECAUSE WE ONLY NEED/WANT TO CREATE THE TABLES FOR THE FIRST TIME, THEN MODIFY THE SCRIPTS TO ‘autoupdate()’ AFTER THAT OR WE’D LOST OUR DATA CHANGES AT THE NEXT START! –> UPDATE: I TRIED TO MODIFY ‘.automigrate()’ to ‘.autoupdate()’ AFTER THE NEXT START BUT IT DIDN’T WORK.

    SO WHAT IS WORK IS TO DELETE/RENAME THE FILES IN /server/boot/ DIRECTORY (I RENAMED THEM TO ’02_create-appusers.js.bak’ AND ’04_load_quizzes.js.bak’)
  6. Go back to the root app then start the node server

    Here are the looks from http://localhost:3000/ or http://localhost:3000/#!/quizzes If any user is logged in (or you can also register and login. Here I registered with email: advcha@yahoo.com and password: admin), here is the lookNew quiz (http://localhost:3000/#!/newquiz)Here is the created quizNOTE: DON’T FORGET TO RENAME THE SCRIPTS IN /server/boot/ DIR TO ’02_create-appusers.js.bak’ AND ’04_load_quizzes.js.bak’ RESPECTIVELY SO THE ABOVE DATA WOULD NOT BE DELETED IF THE NODE SERVER RUN AGAIN!
    Anyway this is very good. But I think it needs some improvements like edit the quizzes (if user is logged in), admin panel, user member (student or admin), etc.

Leave a Reply

Your email address will not be published. Required fields are marked *