电视剧答题闯关

页面

观众只有回答出问题，才能观看这一集电视剧。

在页面中则是观众输入答案，如果，答案正确，则显示"播放"链接。点击该链接，跳转播放页面。

数据库表

sql 复制代码

CREATE TABLE `video` (
  `video_id` int NOT NULL AUTO_INCREMENT COMMENT '编号',
  `video_name` varchar(45) DEFAULT NULL COMMENT '集数',
  `video_url` varchar(45) DEFAULT NULL COMMENT '播放地址',
  `question` varchar(45) DEFAULT NULL COMMENT '问题',
  `answer` varchar(45) DEFAULT NULL COMMENT '答案',
  PRIMARY KEY (`video_id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='电视剧';

csv 复制代码

video_id,video_name,video_url,question,answer
1,天龙八部第1集,/apple.mp4,天龙八部的作者是谁？,金庸
2,天龙八部第2集,/apple.mp4,在上一集中，虚竹是被谁打入了珍珑棋局？,段延庆
3,天龙八部第3集,/apple.mp4,在上一集中，段誉的亲生父亲是谁？,段延庆
4,天龙八部第4集,/apple.mp4,在上一集中，虚竹的亲生母亲是谁？,叶二娘
5,天龙八部第5集,/apple.mp4,在上一集中，无崖子到底爱谁？,李沧海

前端代码

列表页面代码

html 复制代码

<script>
	function checkAnswer(element){
	    var curElem=$(element);
	    if(curElem.val()==curElem.next().text()){
	        curElem.parent().next().children().first().show();
		}else{

	        alert('回答错误！');
        }
	}
//# // 初始化DataGrid对象
$('#dataGrid').dataGrid({
	searchForm: $('#searchForm'),
	columnModel: [
		{header:'${text("集数")}', name:'videoName', index:'a.video_name', width:150, align:"left", frozen:true, formatter: function(val, obj, row, act){
			return '<a href="${ctx}/video/video/form?videoId='+row.videoId+'" class="btnList" data-title="${text("编辑电视剧")}">'+(val||row.id)+'</a>';
		}},
		{header:'${text("问题")}', name:'question', index:'a.question', width:150, align:"left"},
		{header:'${text("答案")}', name:'answer', index:'a.answer', width:150, align:"left", formatter: function(val, obj, row, act){
                return '<input type="text" οnblur="checkAnswer(this)"> <span style="display: none">'+row.answer+'</span>';
            }},
		{header:'${text("操作")}', name:'actions', width:120, formatter: function(val, obj, row, act){
			var actions = [];
			//# if(hasPermi('video:video:edit')){
				actions.push('<a style="display: none" href="${ctx}/video/video/form?videoId='+row.videoId+'" class="btnList" title="${text("编辑电视剧")}"> <span>播放</span></a>&nbsp;');
				actions.push('<a href="${ctx}/video/video/delete?videoId='+row.videoId+'" class="btnList" title="${text("删除电视剧")}" data-confirm="${text("确认要删除该电视剧吗？")}"><i class="fa fa-trash-o"></i></a>&nbsp;');
			//# }
			return actions.join('');
		}}
	],
	//# // 加载成功后执行事件
	ajaxSuccess: function(data){
		
	}
});
</script>

播放页面代码

html 复制代码

<% layout('/layouts/default.html', {title: '电视剧管理', libs: ['validate']}){ %>
<div class="main-content">
	<div class="box box-main">
		<div class="box-header with-border">
			<div class="box-title">
				<i class="fa icon-note"></i> ${text(video.isNewRecord ? '新增电视剧' : '编辑电视剧')}
			</div>
			<div class="box-tools pull-right hide">
				<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
			</div>
		</div>
		<video src="${ctxStatic}${video.videoUrl}" controls></video>
	</div>
</div>
<% } %>
<script>
$("#inputForm").validate({
	submitHandler: function(form){
		js.ajaxSubmitForm($(form), function(data){
			js.showMessage(data.message);
			if(data.result == Global.TRUE){
				js.closeCurrentTabPage(function(contentWindow){
					contentWindow.page();
				});
			}
		}, "json");
    }
});
</script>

后端代码

service.java

java 复制代码

@Override
	public Page<Video> findPage(Video video) {
		video.setOrderBy("video_id");
		return super.findPage(video);
	}

改变排序方式