Establishment of examination questionnaire system
For organizations that have not been upgraded to the new information architecture, please Click here to view User Manual
1. Usage scenarios
Today's schools are more inclined to use the online examination questionnaire system,There is no need to manually mark papers like traditional examinations, which cost a lot of manpower and material resources, has low efficiency and is prone to errors. The online examination system automatically judges the results,However, our examination system usually includes multiple choice questions and short answer questions. If our single choice only needs to be equal to the answer to get the score, then how can our multiple choice points be achieved ~
2. Video Display
3. Procedure
3.1 Step 1: Design page
The multi-choice questions in the examination system are implemented by using the check component. The questions are written in the title, and the answer is the check option, set the single-line text as the correct answer and the numeric component as the score box and the total score (as shown in Figure 3.1-1).
Figure 3.1-1 design page
3.2 Step 2: bind actions
Configure each check boxonChangeAction, named respectivelyonchangeAndonchange2, triggered when the check box value changes (as shown in Figure 3.2-1 and 3.2-2).
Figure 3.2-1 binding action (1)
Figure 3.2-2 binding action (2)
3.3 Step 3: Configure code according to scoring rules
According to the scoring rule configuration code, determine whether the option is correct and fill in the corresponding score.
3.3.1 define variable data sources
Define Variable Data sourcestotalsum, store the total score (as shown in figure 3.3.1-1).
Figure 3.3.1-1 variable data source
3.3.2 scoring rule 1: select the right one to give one point, select the right one to give four points, choose the wrong one to give no points
(1) set the option value in the check box to ABCD, as shown in the following figure:
Figure 3.3.1-1 configuration display value and option value
(2) obtain the option value of the selected option when selecting, and calculate the intersection between the selected array set and the correct answer
var arrjiao = value.filter(function(v){
return arranswer.indexOf(v)!==-1
})
(3) achieve a single multi-choice score calculation
Rules:
- If the character length of the intersection is less than the character length of the selected option, the error answer is selected, that is, no score is selected. If the character length of the intersection is equal to the option length, the selected options are all correct.
- If you select the correct option, you must determine the length of the intersection character and the length of the correct answer character. If the length of the intersection character is equal to the length of the correct answer character, the correct answer is scored four points, assign 4 to the score. If the intersection length is less than the correct answer length, the intersection * 1 is used to obtain the score and assign it to the score.
Figure 3.3.1-2 calculate the score of a single multi-choice
export function onChange({ value }) {
// console.log(value);
var arranswer = this.$('textField_kvhis9bc').getValue();
var arrjiao = value.filter(function (v) {
return arranswer.indexOf(v) !== -1
})
if (arrjiao.length < value.length) {
this.$('numberField_kvhis9bp').setValue("0");
} else if (arrjiao.length === value.length) {
if (arrjiao.length === arranswer.length) {
this.$('numberField_kvhis9bp').setValue("4");
} else if (arrjiao.length < arranswer.length) {
this.$('numberField_kvhis9bp').setValue(arrjiao.length * 1);
}
}
}
(4) multiple choices to calculate scores
Each question is bound to a uniqueonchangeEvent, namedonchangeAndonchange2, the unique ID that needs to be changed.
First question bindingonchangeEvents (as shown in figure 3.3.1-3).
The second question and subsequent questions are bound to the correspondingonchange2,onchange3... (As shown in Figure 2.3.1-4).
Figure 3.3.1-3 calculate the score of the first question
Figure 3.3.1-4 calculate the score of the second question
export function onChange({ value }) {
this.setState({
totalsum: this.$('numberField_kvhis9bp').getValue() ? this.$('numberField_kvhis9bp').getValue() : 0
})
var arranswer = this.$('textField_kvhis9bc').getValue();
var arrjiao = value.filter(function (v) {
return arranswer.indexOf(v) !== -1
})
if (arrjiao.length < value.length) {
this.$('numberField_kvhis9bp').setValue("0");
} else if (arrjiao.length === value.length) {
if (arrjiao.length === arranswer.length) {
this.$('numberField_kvhis9bp').setValue("4");
} else if (arrjiao.length < arranswer.length) {
this.$('numberField_kvhis9bp').setValue(arrjiao.length * 1);
}
}
//zongfen
const sumlist = [];
const totalsum = [];
let sum1 = 0;
let sum = 0;
sumlist.push(this.$('numberField_kvhis9bp').getValue())
for (let j = 0; j < sumlist.length; j++) {
sum1 = sumlist[length - 1]
}
this.$('numberField_kvhis9bs').setValue(sum1 + this.state.totalsum)
}
/**
* checkboxField onChange
* @param value 选中的值
*/
export function onChange2({ value }) {
this.setState({
totalsum: this.$('numberField_kvhis9bs').getValue()
})
var arranswer = this.$('textField_kvhis9bi').getValue();
var arrjiao = value.filter(function (v) {
return arranswer.indexOf(v) !== -1
})
if (arrjiao.length < value.length) {
this.$('numberField_kvhis9bq').setValue("0");
} else if (arrjiao.length === value.length) {
if (arrjiao.length === arranswer.length) {
this.$('numberField_kvhis9bq').setValue("4");
} else if (arrjiao.length < arranswer.length) {
this.$('numberField_kvhis9bq').setValue(arrjiao.length * 1);
}
}
//zongfen
const sumlist = [];
const totalsum = [];
let sum1 = 0;
let sum = 0;
sumlist.push(this.$('numberField_kvhis9bq').getValue())
for (let j = 0; j < sumlist.length; j++) {
sum1 = sumlist[length - 1]
}
totalsum.push(sum1, this.state.totalsum)
for (let i = 0; i < totalsum.length; i++) {
sum += totalsum[i]
}
this.$('numberField_kvhis9bs').setValue(sum)
this.setState({
totalsum: sum
})
}
4. Effect demonstration
Figure 4-1 effect demonstration