WEX5 Tutorial Module frame design of text-to-detail examination questions

A few days ago to help people to design a mobile phone version (do screen adaptation, computer use is also normal) of the examination frame, for the use of learning and communication, today the design ideas and skills of life collation.

One effect Demo:

1 Landing Backstage

Bank Management

Test Paper Management

Candidate Management

Account Management

2 Candidate Registration

Candidates Login

Enter the exam interface

Start answering

You can save it by handing

Two development ideas:

The data synchronization is realized by taking full advantage of the storage characteristics of the Baasdata data binding and the temporal component, and the idea of binding is through the whole question module design.

Three-page logic and code implementation:

1 Database Design

Database Design Model Basics:

(note) The data model is a description of the data-related business throughout the development process, according to the development experience, according to the above four categories, you can quickly create the necessary basic tables.

The basic table of the examination questions module is as follows:

Student table describing basic information and landing status of students

Question Bank table, put all the questions and answers into a bank, similar to the warehouse, note, I put the title, the correct answer and 4 options in a record, the front desk will be splicing processing.

A discipline table used to classify questions.

Paper Name table

Test set table, is an intermediate table, the number of questions drawn to form a Test paper. There are several papers in one subject. Many-to-many table association, need the intermediate table to carry on the role operation, facilitates the front end to take the value conveniently

Answer sheet, after answering the questions, submit the answers to the answer library, easy to analyze and organize in the background.

(note) 1 table name prefix t_, no special inter-righteousness, just to in the database, hundreds of tables, the current project used to put together the table, find it convenient

The 2 field prefix t_, although not particularly meaningful, is important to avoid conflicts with the database's reserved fields when manipulating the database, resulting in a save failure.

2. Login, registration, page jump, transfer, background management

Everybody see my it detailed explanation, here does not do the exhaustion to describe.

3. Exam Questions Module

Start Answer dialog box

Loading questions

Page and Component design

(note) 1 topic, which is an output, bound to the current line

24 options, implemented with Radiogroup, option to load data with front end, then bind with Radiogroup

Toggle the test, switch with the current line, and load the options to the temporary data, and after the click Switch, the right and wrong span pairs like hidden.

Right and wrong judgment and display, using Radiogroup's change event, triggering judgment and judging result, using JS method to control the hiding and display of false and false span elements

Four summary:

1 guiding principle: Binding technology is the core of all design. Replace a lot of code, efficient, easy to maintain

2 Development sequence: Database--page logic--code implementation

Database, is the data description of the image in the project, the design of the data model is directly related to the pros and cons of the front and back development. Many of the students watching the official video is still not design anything, then, look at the database bar, because you have no concept of the data model.

3 Problem Solving:

Development process will encounter a variety of problems, to ask others is good, can not solve is a bug. This has become a lot of novice intuition. There are bugs in any frame, and there are no flawless software in the world. There are bugs not scary, scary is standing in front of the bug helpless. The correct idea is, change the total thinking and angle, see what the nature of the problem, from the beginning of the database to the page and then to the logic, a ring test, to see where the problem is the symbol error, punctuation missing, or failed to pass the argument. 100 Tests, which represent your understanding of the error.

4 test Method:

1 alert: A large number of temporary tests, one step, one step, do not go far to re-test. Not just the output character, it can be used to test the page load event, the data value event, to observe the scope of the image, whether the event is executed, and so on.

2 Google Development tools: Everyone is shouting development documents less, no tutorials, trouble everyone to open the development tools, look inside the method, the method of slices, events, listeners, attributes, to the image, elements, to like who, how to get to the image, how to get the value, the event on who, triggered which command. WEX5 not provide the API, Google inside there are so many ways to use, Haha, JS is omnipotent king Ah.

5. Advice to Beginners:

As a beginner, give the beginner's advice:

1 WEX5 Official tutorials, must see

2 database, must learn

3 JS must learn

4 Html5,css must learn

These 4 kinds of correlation, indispensable. If you want to finish a small project, even if it is a small demonstration, start working hard.

WEX5 Tutorial Module frame design of text-to-detail examination questions