Students who learn by rote memorization, facing the thick books piled up on the table, do they feel that the pear mountain is too big? Thinking about education but facing the problem of learning costs is not small, do they feel all kinds of inconvenience? If you are interested in the code, you might as well try to build your own online answering system, which can be realized with the WeChat applet project.
Create ideas, extract various key points from the book and write them into a document, and then process through the construction script to generate a question bank, put it in a site that hosts the question bank file, and use a small program to request the background to obtain the question bank ,
Open the WeChat development tool, select the applet, create a project,
For example, the project name is
miniprogram-answer, then select the following, and then confirm the creation
- AppID uses its own test number
- Does not use cloud services
- JavaScript - Basic Templates
create three pages
On the home page of the applet, create three pages, manage them through the tabs at the bottom,
There is a file under the project app.json, you can modify the configuration, add the tab at the bottom of the page here, the following code
"tabBar": {
"list": [
{
"text": "科目",
"pagePath": "pages/tab1/tab1",
"iconPath": "static/icon_floder.png",
"selectedIconPath": "static/icon_floder.png"
},
{
"text": "答卷",
"pagePath": "pages/tab2/tab2",
"iconPath": "static/icon_floder.png",
"selectedIconPath": "static/icon_floder.png"
},
{
"text": "我的",
"pagePath": "pages/tab3/tab3",
"iconPath": "static/icon_floder.png",
"selectedIconPath": "static/icon_floder.png"
}
]
}
Click Save after modification, the development tool will automatically create three page files corresponding to the bottom tab
first page
Look at the first page, the file location is pages/tab1/tab1,
This page is used to display various subjects, and the latest updated information,
In the page layout file tab1.wxml, add the layout, as shown below
In a page configuration tab1.jsonfile, you can see that the configuration is as follows
{
"usingComponents": {
"carousel":"/components/carousel/carousel",
"grid-menu":"/components/grid-menu/grid-menu",
"group-list":"/components/group-list/group-list"
}
}
The layout of the page can be completed with the above three custom components, which are
- carousel carousel
- grid-menu grid menu
- group-list group list
second page
Look at the second page, the file location is pages/tab2/tab2,
This page is used to display the user's latest, or choose to open the viewed topic,
In the page layout file tab2.wxml, add the layout as shown below
The list item is a folder. Click to expand to display the file list inside.
This page only usesgroup-listthe grouped list component, which is similar to the effect of the accordion component.
third page
Look at the third page, the file location is pages/tab3/tab3,
It is used to show your own, the results of passing the questions, and the total score,
In the page layout file tab3.wxml, add the layout as shown below
This page uses a
user-carduser card component and agroup-listgroup list component to display results
Packet loading
Others such as inner pages, multi-branch pages, and multi-pages can be placed in subpackages.
It can be loaded on demand, reducing the loading time of applets,
app.jsonNext, to create a subcontract, you need to add a subcontract information in the configuration file , the code is as follows
"subPackages": [
{
"root": "package1",
"pages": [
"pages/index/index",
"pages/answer/answer"
]
}
]
After clicking Save, the development tool will automatically create a subpackage folder under the project
package1
Topic list page
In the subpackage folder, create a topic selection list page, the file is in package1/pages/index/index,
When the user clicks on one of the subjects, such as electronic subjects, the page entered is the topic selection list page, as shown in the figure below
The page uses a search box and a custom component
group-listdisplay list,
answer page
In the subpackage folder, create another answer page, the file is in package1/pages/answer/answer,
When the user selects a topic, such as clicking on the computer basic knowledge question, the page entered is the answer page, as shown in the figure below
The page layout uses form components:
form,radio,checkbox,buttona combination of multiple input components, which is not complicated.
The answer page can have single-choice questions, multiple-choice questions, fill-in-the-blank questions, and
the countdown is updated in the title bar
background data
The above pages are all finished, and I am confident that I can make the same one, but where does the data on the page come from?
request data
Of course, it is obtained from a remote server. It can be imagined that it uses a browser to access network information. You need to know its access address first.
app.jsAdd the requested data method in the file , the code is as follows
/**
* 请求数据方法
*/
request(options) {
const req = (complete) => {
wx.request({
complete,
url: `https://gitcode.net/zs1028/resource_mp_answer/-/raw/master/${
options.filename}?inline=false`,
fail: options.fail,
success(res) {
switch(res.statusCode){
case 200:
options.success(res.data);
break;
case 404:
default:
options.fail({
errMsg:'资源未找到' })
}
}
})
};
if (options.showLoading) {
wx.showLoading({
title: options.showLoading instanceof String ? options.showLoading : '请求中',
success:() => req(() => wx.hideLoading())
})
}else req()
},
The request method is the same as
request()the API usage of the WeChat applet , but there is a difference. It should be replaced with the resource file name (including the path). If you want to use your own question bank instead, replace the link with the address of the gitcode project you manage.wx.request()urlfilename
Continue to app.jsadd the click method in the file navigateToAnswerPage()to open the answer page, the code is as follows
navigateToAnswerPage(item) {
wx.navigateTo({
url: `/package1/pages/answer/answer?name=${
item.key}&value=${
item.value}`,
})
}
After the two methods mentioned above are written, you can call this method on other pages to load data and open the answer page
Management background
The background data are all placed here, click this resource_mp_answer to view, you can see that the data are all json files,
The data is placed in the hosted website Gitcode , which is convenient for subsequent management and maintenance, and there is no need to rent a server, which reduces costs.
Since the data is public by default, anyone can access and copy it on the hosted website.
Therefore, private data (projects) cannot be accessed and used publicly, and the setting is simple.
Kind tips
Hosting websites are used to host code. I don’t know if hosting resources will be restricted in the future (may be considered a loophole). For the time being, it is still available
About the project
Just write here, see here, is the reader clear about the realization of the answer to the question?
If you have a small program development foundation, you can try to implement one yourself.
Regarding the organization of question bank resources,
students in school may need to use this auxiliary learning, update learning materials while learning, just use it as a study note, review before the exam; this is also very helpful
for school teachers, after all, personal The power is limited, teachers can organize multiple students to participate in the construction of a question bank resource, share the question bank resources, improve learning efficiency, and have confidence in the exam.
Let’s take a look at the running effect of the answering applet project, the animation is as follows,
Project source code
Regarding the source code of the project, it has been placed under the resource category. You need to find it. Click here to find the answer-small program-project source code . support.
