界面實現(xiàn)
無論是WEX還是BEX，開發(fā)各種客觀題模塊都是最常見的。但是，最近在利用業(yè)余時間想開發(fā)一個學(xué)生使用的小型客觀題系統(tǒng)時遇到了麻煩。首先，在論壇上搜索到了大量相似問題。問題或者過于簡單，或者過于特殊。且看一下本人提供的客觀題界面，我相信這種設(shè)計思路還是與大多數(shù)應(yīng)用需求相一致的。
這是單選題界面和多選題界面。
注意：我每一個小題旁邊放置的按鈕是便于學(xué)生自我測試時看參考答案時使用的。這個小功能設(shè)計比較簡單（我使用的是PopOver組件，其內(nèi)的span對應(yīng)的bind-text令其等于 $model.singleData.val("fAnswer")類似的內(nèi)容即可實現(xiàn)即時地查看對應(yīng)小題的答案）。
問題
在開發(fā)類似于上面的系統(tǒng)時注意到不少像我這樣的初學(xué)者存在與我十分類似的困惑。
（補(bǔ)注：這樣人可能以前有JAVA,C#,VB等UI開發(fā)經(jīng)驗，但遺憾的是，這些軟件開發(fā)思路與X5中的H5開發(fā)思想發(fā)生了重大變化--不知大伙與我意見一致否？）
歸納起來，問題有：
1，list組件的onClick 事件中 如何得到 list某一行的id？ 地址：http://doc.wex5.com/comps-list/。
2，如何在list組件中放置radio組件或者radioGroup組件實現(xiàn)類似于我實現(xiàn)的上述選擇題界面？
3，在上面界面前提下，在用戶做過好幾個小題后，如果對比答案（比較庫中正確與錯誤的答案，檢查其做題效果如何）？
補(bǔ)充
由于我上述小系統(tǒng)比較簡單，所以暫時只考慮使用本地json方式存儲試題內(nèi)容，單選，多選，判斷等都各自對應(yīng)一個JSON文件。例如，單選題文件singleData.json類似于如下結(jié)構(gòu)：
[
{"fCode":"0401",
"fTrunk":"在數(shù)據(jù)庫表格中唯一標(biāo)識一條記錄的是（ ?。?。",
"fChoiceA":"A.主鍵",
"fChoiceB":"B.候選鍵",
"fChoiceC":"C.索引",
"fChoiceD":"D.關(guān)鍵字",
"fAnswer":"A"
},
{"fCode":"0402",
"fTrunk":"下列哪一種不屬于ACCESS 2010的數(shù)據(jù)類型（ ?。?。",
"fChoiceA":"A.數(shù)字",
"fChoiceB":"B.文本",
"fChoiceC":"C.附件",
"fChoiceD":"D.插件",
"fAnswer":"D"
},
{"fCode":"0403",
"fTrunk":"下列哪一種不屬于ACCESS 2010的關(guān)系表達(dá)式中的邏輯運(yùn)算符（ ?。?,
"fChoiceA":"A.And",
"fChoiceB":"B.Not",
"fChoiceC":"C.Or",
"fChoiceD":"D.Else",
"fAnswer":"D"
},
{"fCode":"0404",
"fTrunk":"ACCESS 2010六大對象不可以（ ?。?,
"fChoiceA":"A.刪除",
"fChoiceB":"B.隱藏",
"fChoiceC":"C.創(chuàng)建",
"fChoiceD":"D.創(chuàng)建快捷方式",
"fAnswer":"D"
},
............
]
多選題文件結(jié)構(gòu)類似于：
[
{"fCode":"0401",
"fTrunk":"數(shù)據(jù)庫管理系統(tǒng)主要包含以下功能（ ?。?。",
"fChoiceA":"A.數(shù)據(jù)定義",
"fChoiceB":"B.數(shù)據(jù)操縱",
"fChoiceC":"C.數(shù)據(jù)庫運(yùn)行管理",
"fChoiceD":"D.數(shù)據(jù)庫建立和維護(hù)",
"fChoiceE":"E.數(shù)據(jù)通信功能",
"fAnswer":"ABCDE"
},
{"fCode":"0402",
"fTrunk":"數(shù)據(jù)庫管理系統(tǒng)的簡稱是（ ）。",
"fChoiceA":"A.DB",
"fChoiceB":"B.DBMS",
"fChoiceC":"C.ORDBS",
"fChoiceD":"D.RDBS",
"fChoiceE":"E.DDL",
"fAnswer":"B"
},
{"fCode":"0403",
"fTrunk":"關(guān)系是具有如下特征的二維表（ ）。",
"fChoiceA":"A.行存儲實體數(shù)據(jù)",
"fChoiceB":"B.列存儲實體屬性",
"fChoiceC":"C.每列具有唯一名稱且數(shù)據(jù)類型一致",
"fChoiceD":"D.列的順序任意，行的順序也任意",
"fChoiceE":"E.任意兩行內(nèi)容不能完全重復(fù)",
"fAnswer":"ABCDE"
},
{"fCode":"0404",
"fTrunk":"ACCESS 2010六大對象包括（ ）。",
"fChoiceA":"A.表",
"fChoiceB":"B.查詢",
"fChoiceC":"C.窗體",
"fChoiceD":"D.宏",
"fChoiceE":"E.模塊",
"fAnswer":"ABCDE"
},
{"fCode":"0405",
"fTrunk":"ACCESS 2010中查詢分為兩大類型，它們是（ ?。?,
"fChoiceA":"A.選擇查詢",
"fChoiceB":"B.刪除查詢",
"fChoiceC":"C.操作查詢",
"fChoiceD":"D.生成表查詢",
"fChoiceE":"E.SQL查詢",
"fAnswer":"AC"
}
]
加載上述試題內(nèi)容的方式官方DEMO中大量提供類似代碼，直接使用即可（下面是我加載單選內(nèi)容的代碼）：
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);//將返回的數(shù)據(jù)加載到data組件
},
error: function(){
throw justep.Error.create("加載數(shù)據(jù)失敗");
}
});
};
至于設(shè)置單選題對應(yīng)數(shù)據(jù)組件singleData的limit等屬性小問題及radio和radioGroup組件的常見屬性設(shè)置在此小不贅述了（我使用的是radioGroup組件設(shè)計單選題界面）。
真正的問題
可能受到以前UI設(shè)計思路的影響，很可能大家的問題都集中在前面列舉的問題1上，即“l(fā)ist組件的onClick 事件中 如何得到 list某一行的id”。但是，看X5的UI組件設(shè)計思想，這種想法本身可以理解，但是在X5 UI編程中是不能考慮的（即它無法支持）。
例如，無論在官方‘文檔中心’的list組件介紹或者‘如何主動定位到行’（http://bbs.wex5.com/forum.php?mod=viewthread&tid=117208&highlight=list%E7%BB%84%E4%BB%B6）帖子中，都提供類似于這樣的描述：
“
數(shù)據(jù)再多也是遍歷！
wex5開發(fā)項目，準(zhǔn)守的一個原則就是面向數(shù)據(jù)變成，面向data組件編程！
頁面一切操作都是直接操作數(shù)據(jù)組件的！”
如果上面這個問題1解決了，那么其他相應(yīng)問題便迎刃而解！不知官方權(quán)威開發(fā)朋友對此是如何解釋的（因為那個‘文檔中心’的問題貴方并沒有給予解釋）。
我遇到的一個具體問題
在上面以單選題為代表的設(shè)計下，我很自然地想到了radioGroup的onChanged事件，于是添加了如下代碼：
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);
//怎么總是輸出相同的第1題，選擇A
//store the user select
console.log('第'+i+'題');
//獲取radioGroup的值
var val = this.comp("radioGroupSingle").val();
console.log('select: '+val);
//data.next();
//var confirmRefresh = data.confirmRefresh;
//強(qiáng)制刷新數(shù)據(jù)
//data.refreshData();
// try{
// data.confirmRefresh = false;
// data.refreshData();
// }finally{
// data.confirmRefresh = confirmRefresh;
// }
//data.refresh();
};
上面的注釋內(nèi)容我添加了又刪除，刪除了又添加，反復(fù)試驗多次，結(jié)果只有一個：并不輸出當(dāng)前題號，即只是顯示list中第一項，即數(shù)據(jù)組件第一行中對應(yīng)內(nèi)容！
一種勉強(qiáng)的解決辦法
一下找不到那個帖子了，他是在每一個界面中只顯示一個題（無論是單選還是多選），然后下面放置類似于‘第一個’‘下一個’‘最后一個’‘最開始’等常見導(dǎo)航按鈕，這樣設(shè)置界面的話問題簡單得多了，即使用類似于上面的radioGroup的onChanged事件中，調(diào)用數(shù)據(jù)組件的next,prev等方法即可實現(xiàn)每一小題的實時定位。這種方案容易多了！
但是，想一下，如今的智能手機(jī)屏幕越來越大，不考慮使用scrollView與list組件（其中放置每道試題相關(guān)內(nèi)容）結(jié)合，每一頁中顯示N道題，顯然是不友好的設(shè)計。即上述設(shè)計方案存在片面性，而不是更為一般的方案。
我目前想到的針對我的上面設(shè)計的另一種尚未試驗的方案是，在DATA組件設(shè)計中，再添加一個答案列。上面的fAnswer這一列對應(yīng)于正確的標(biāo)準(zhǔn)答案，可以再添加一個用戶本人選擇答案的存儲列，例如稱為fUserAnswer。我們不去考慮類似于上面onChanged事件中準(zhǔn)確定位每一題的題號的問題，而只是關(guān)注用戶做題結(jié)束后通過對應(yīng)上面的兩個列，讓用戶知道他做對了哪些？做錯了哪些即可。另外，有了上面的即時提示按鈕，他當(dāng)時做第X小題的正確與否情況問題也解決了。不知各位看法如何？
我抓緊試驗一下，結(jié)果將會一并提交于下面。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
重慶分公司
重慶分公司
