Shulou(Shulou.com)06/01 Report--

Interface realization

Whether it is WEX or BEX, it is most common to develop a variety of objective question modules. Recently, however, I ran into trouble when I tried to develop a small objective question system for students in my spare time. First of all, a large number of similar questions were found on the forum. The problem is either too simple or too special. Let's take a look at the objective question interface I provide. I believe this design idea is consistent with most application requirements.

This is the single-choice interface and the multi-choice interface.

Note: the buttons placed next to each of my questions are convenient for students to use when looking at the reference answers when taking self-tests. The design of this small function is relatively simple (I use the PopOver component, in which the bind-text corresponding to span makes it equal to $model.singleData.val ("fAnswer") and similar content can instantly view the answers to the corresponding questions).

problem

In the development of a system similar to the above, I noticed that many beginners like me have a very similar confusion.

(note: such people may have previous UI development experience such as JAVA,C#,VB, but unfortunately, these software development ideas have changed significantly from H5 development ideas in X5-do you agree with me? )

To sum up, the questions are:

1How do I get the id of a line of list in the onClick event of the list list component? Address: http://doc.wex5.com/comps-list/.

2, how to put the radio component or radioGroup component in the list component to implement the multiple choice interface similar to the one I implemented above?

3, under the premise of the above interface, after the user has done several questions, if you compare the answers (compare the correct and wrong answers in the library, check the effectiveness of the questions)?

Supplement

As my above small system is relatively simple, so for the time being only consider using the local json way to store the content of the test, single selection, multiple selection, judgment and so on all correspond to a JSON file. For example, the single topic file singleData.json is similar to the following structure:

[

{"fCode": "0401"

"fTrunk": "the one that uniquely identifies a record in the database table is ()."

"fChoiceA": "A. Primary key"

"fChoiceB": "B. candidate key"

"fChoiceC": "C. Index"

"fChoiceD": "D. keyword"

"fAnswer": "A"

}

{"fCode": "0402"

"fTrunk": "which of the following data types does not belong to ACCESS 2010 ()."

"fChoiceA": "A. number"

"fChoiceB": "B. text"

"fChoiceC": "C. attachment"

"fChoiceD": "D. plug-in"

"fAnswer": "D"

}

{"fCode": "0403"

"fTrunk": "which of the following logical operators () in relational expressions that do not belong to ACCESS 2010."

"fChoiceA": "A.And"

"fChoiceB": "B.Not"

"fChoiceC": "C.Or"

"fChoiceD": "D.Else"

"fAnswer": "D"

}

{"fCode": "0404"

"fTrunk": "the six objects of ACCESS 2010 cannot ()."

"fChoiceA": "A. delete"

"fChoiceB": "B. hide"

"fChoiceC": "C. create"

"fChoiceD": "D. create a shortcut"

"fAnswer": "D"

}

.

]

The structure of the multi-choice file is similar to:

[

{"fCode": "0401"

"fTrunk": "the database management system mainly includes the following functions ()."

"fChoiceA": "A. data definition"

"fChoiceB": "B. data manipulation"

"fChoiceC": "C. database operation management"

"fChoiceD": "D. Database Establishment and maintenance"

"fChoiceE": "E. data communication function"

"fAnswer": "ABCDE"

}

{"fCode": "0402"

"fTrunk": "the abbreviation of database management system is ()."

"fChoiceA": "A.DB"

"fChoiceB": "B.DBMS"

"fChoiceC": "C.ORDBS"

"fChoiceD": "D.RDBS"

"fChoiceE": "E.DDL"

"fAnswer": "B"

}

{"fCode": "0403"

"fTrunk": "A relationship is a two-dimensional table () with the following characteristics."

"fChoiceA": "A. rows store entity data"

"fChoiceB": "B. column Storage entity Properties"

"fChoiceC": "C. each column has a unique name and consistent data type"

"fChoiceD": "D. arbitrary order of columns and rows"

"fChoiceE": "E. any two lines cannot be completely repeated"

"fAnswer": "ABCDE"

}

{"fCode": "0404"

"fTrunk": "the six objects of ACCESS 2010 include ()."

"fChoiceA": "A. Table"

"fChoiceB": "B. query"

"fChoiceC": "C. form"

"fChoiceD": "D. Macro"

"fChoiceE": "E. module"

"fAnswer": "ABCDE"

}

{"fCode": "0405"

"fTrunk": "there are two main types of queries in ACCESS 2010, which are ()."

"fChoiceA": "A. Select query"

"fChoiceB": "B. delete query"

"fChoiceC": "C. Operation query"

"fChoiceD": "D. query for generating tables"

"fChoiceE": "E.SQL query"

"fAnswer": "AC"

}

]

How to load the contents of the above questions A large number of similar codes are available in the official DEMO, which can be used directly (here is the code for loading radio content):

Model.prototype.singleDataCustomRefresh = function (event) {

Var singleData = event.source

$.ajax ({

Type: "GET"

Url: require.toUrl ('. / json/singleData.json')

DataType: 'json'

Async: false

Cache: false

Success: function (data) {

SingleData.loadData (data); / / load the returned data into the data component

}

Error: function () {

Throw justep.Error.create (failed to load data)

}

});

}

As for setting the limit of the data component singleData and the common property settings of the radio and radioGroup components, I will not repeat them here (I use the radioGroup component to design the menu interface).

The real problem.

It may be influenced by previous UI design ideas, and it is likely that everyone's questions will focus on question 1 listed above, that is, "how to get the id of a line of list in the onClick event of a list component." However, if you look at the design idea of X5's UI components, this idea itself is understandable, but it cannot be considered in X5 UI programming (that is, it cannot be supported).

For example, a description similar to this is provided in the official list component introduction in the document center or in the "how to actively navigate to a line" (http://bbs.wex5.com/forum.php?mod=viewthread&tid=117208&highlight=list%E7%BB%84%E4%BB%B6) post:

"

No matter how much data is traversing!

Wex5 development project, one of the principles is to become data-oriented, data component-oriented programming!

All the operations on the page directly manipulate the data components! "

If the above problem 1 is solved, then other corresponding problems will be easily solved! I do not know how the official developers explain this (because you have not explained the problem of the 'document center').

A specific problem I encountered

Under the above design represented by the single topic, I naturally thought of the onChanged event of radioGroup, so I added the following code:

Model.prototype.radioGroupSingleChange = function (event) {

Var crow = this.comp ('singleData') .getCurrentRow (); / / start from 0

/ / var id1 = this.comp ('singleData') .getRowID (crow)

Console.log ('Current row index:' + "+ crow.index ())

/ / var context=event.bindingContext

/ / var span1=this.comp ('outputSingle')

/ / console.log ("No:" + span1.innerText)

/ / debugger

Var data=this.comp ('singleData')

Var v = data.getValue ('fCode')

Console.log ("fCode:" + v)

/ / get question seqCode

Var i=data.val ("fCode"). Substring (3)

/ / Why do you always output the same first question, choose A

/ / store the user select

Console.log ('title' + iTunes')

/ / get the value of radioGroup

Var val = this.comp ("radioGroupSingle") .val

Console.log ('select:' + val)

/ / data.next ()

/ / var confirmRefresh = data.confirmRefresh

/ / force refresh of data

/ / data.refreshData ()

/ / try {

/ / data.confirmRefresh = false

/ / data.refreshData ()

/ /} finally {

/ / data.confirmRefresh = confirmRefresh

/ /}

/ / data.refresh ()

}

I have added and deleted, deleted and added the above comments, and tried repeatedly, but there is only one result: it does not output the current title number, that is, it only displays the first item in the list, that is, the corresponding content in the first line of the data component!

A grudging solution

I can't find that post at once. He only displays one question (whether single or multiple) in each interface, and then places common navigation buttons such as' first', 'next', 'last' and 'start' below, which makes the problem much easier to set up the interface, even in the onChanged event similar to the radioGroup above. The real-time positioning of each question can be realized by calling the next,prev and other methods of the data component. This kind of plan is much easier!

However, come to think of it, today's smartphone screens are getting bigger and bigger, and it is obviously an unfriendly design to display N questions on each page without considering the combination of scrollView and list components (which contain content related to each question). That is to say, the above design scheme is one-sided, not a more general one.

Another untried solution I've come up with for my above design is to add an answer column to the DATA component design. The fAnswer column above corresponds to the correct standard answer, and you can add a storage column for the answer selected by the user, such as fUserAnswer. Instead of considering the question of accurately locating the title of each question in the onChanged event above, we just focus on letting the user know what he has done right by corresponding to the two columns above. You can do something wrong. In addition, with the instant prompt button above, the question of whether he was correct in doing question X at that time was solved. What do you think?

I will try it quickly, and the results will be submitted below.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.