前端小项目 QuizApp 答题卡片

涉及知识点

原生JS操作DOM常用方法
清除父节点里的所有子节点
input 标签

介绍

页面显示一张卡片，上面有题目和选项，选择某个选项后点击提交，卡片内容换成其他题目。答完指定数目题目后会显示用户的答题结果，再次点击按钮可以重新答题。

代码

每次用户点击提交按钮时判断当次的答题结果，正确的话给标志位加一，然后销毁上一题的节点，渲染下一题的内容。
简单版本，只写了javascript，没有样式。

html:

<p class="question_title"></p>
<div class="answer_list"></div>
<button class="submit">提交</button>

javascript:

let res = [{title: '1+1=?',answerList: ['10', '2', '3', '4','99'],answer: '2'}, {title: '哪个是水果？',answerList: ['西瓜', '小猫','小狗'],answer: '西瓜'}, {title: '9-4=?',answerList: ['3', '4', '5', '6'],answer: '5'}
]
let title = document.querySelector('.question_title')
let list = document.querySelector('.answer_list')
let submitBtn = document.querySelector('.submit')let idx = 0
let correct = 0
showQuestion(idx)
submitBtn.addEventListener('click',()=>{if(submitBtn.innerText=='重新答题'){showQuestion(idx)submitBtn.innerText = "提交"return}let choose = document.querySelector('input:checked').valueif(choose == res[idx].answer){correct++console.log('success')}idx++if(idx<res.length){showQuestion(idx)} else{list.innerHTML = ""title.innerText = `一共${res.length}个问题，您答对了${correct}个！`submitBtn.innerText = "重新答题"idx = 0correct = 0}
})function showQuestion(num) {list.innerHTML = ""title.innerText = res[num].titlefor (let i = 0; i < res[num].answerList.length; i++) {let radio = document.createElement('input')let text = document.createTextNode(res[num].answerList[i])radio.type = 'radio'radio.name = 'answer'radio.value = res[num].answerList[i]list.appendChild(radio)list.appendChild(text)}
}

前端小项目 QuizApp 答题卡片相关推荐

前端小项目（一）| 电影院座位预定（html，css，js）
前端小项目(一)| 电影院座位预定前言开始好好学习前端啦.学紫色爱心记录一波!! 初步学了html,css,js,在github上找了几个前端小项目模仿着练练手.第一个就是电影院座位预定页面,主要 ...
白天、暗夜双重模式+自作潜水俱乐部前端小项目+学习经验总结(一)
嗨,这里是X,今天带来最近写的一个前端小项目,还挺不错的,所以就在这里分享一下
前端小项目——模拟微信界面对话框
最近看网课做了个小项目,用到了前端很多知识点用到的知识点: HTML知识点: div大盒子,id为contentALL:包含所有的内容 div头部小盒子,id为header:包含整个对话框的头部信息 ...
618快到了送上自制前端小项目（html css js）
目录 ??.自定义播放器 ??.图片自动消失 .小轮播图 ??.旋转音乐盒前言:这些小项目全都是自创的. 如果需要应用,或则转发的话请与博主联系,感谢你们的理解, 1.自定义播放器在页面中放置2 ...
前端小项目之在线便利贴
实现的效果如下: 界面可能不是太好看?,考虑到容器的高度会被拉长,因此没有用图片做背景. 预览便利贴涉及的知识点 sass(css 预编译器) webpack(自动化构建工具,实现LESS,CSS ...
web前端小项目个人实例_Web前端：小程序界面与逻辑项目实训
大家好,我来了!本期为大家带来的Web前端学习知识是"Web前端:小程序界面与逻辑项目实训",喜欢Web前端的小伙伴,一起看看吧! 主要内容数据绑定渲染界面层数据渲染事件处 ...
（云服务器+JQuery+JS+BootStrap+Navicat+AJAX+JavaScript）第一个前端小项目【面试】
目录第一步:登录云服务器查看根目录运行jar包端口被占用 ps -ef:查看使用的端口号 kill -9 端口号:杀掉该进程,取消端口占用 1.配置数据库 2.启动jar包 3.测试swag ...
50天50个前端小项目（纯html+css+js）第八天（形成波浪动画结合登录表单）
今天来做一个结合登录表单实现的波浪动画效果,没错,你没听错,重点不是表单,是波浪. 先看效果:首先是平平无奇的波浪效果然后当你点击输入框的时候:例如输入框里的Email和Password是会一个单词 ...
前端小项目（三）| 魔方魔方（html、css、js）
文章目录前言一.HTML 二.CSS 三.JavaScript 前言 MOOC课程的实践项目,做一个魔方~ 效果长这样~魔方在自主转动,且每个面的小方块可以飞走飞回. 代码放在:https://g ...

前端小项目 QuizApp 答题卡片

涉及知识点

介绍

代码

前端小项目 QuizApp 答题卡片相关推荐

最新文章

热门文章