4.2. Các đoạn mã nguồn chính
Mã nguồn thêm CDN thư viện:bootsrap, fonts, jquery,...và thiết đặt google Analytics
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<meta property="fb:admins" content="{175217149667354}" />
<meta property="fb:admins" content="{tran.anh.uet}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
#footer {
background: #F7F2E0;
}
#comment {
background: #F7F2E0;
}
</style>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-97472165-2', 'auto');
ga('send', 'pageview');
</script>
Mã nguồn thêm nút like, share; comment và fanpage Facebook
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.9&appId=175217149667354";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '175217149667354',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function onButtonClick() {
// Add this to a button's onclick handler
FB.AppEvents.logEvent("sentFriendRequest");
}
</script>
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v2.9&appId=175217149667354";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Mã nguồn để chọn độ khó cho trò chơi
<table align="center">
<tr>
<td width="150" height="150">
<a href="Kho.html">
<button class="btn btn-danger btn-lg btn-block" type="button" >
<h2 style="font-family: 'Roboto Slab', serif; color:#060"><b>KHÓ</b></h2>
</button>
</a>
</td>
</tr>
<tr>
<td width="150" height="150">
<a href="Trungbinh.html">
<button class="btn btn-info btn-lg btn-block" type="button" >
<h2 style="font-family: 'Roboto Slab', serif; color:#306"><b>TRUNG BÌNH</b></h2>
</button>
</a>
</td>
</tr>
<tr>
<td width="150" height="150">
<a href="De.html">
<button class="btn btn-primary btn-lg btn-block" type="button" >
<h2 style="font-family: 'Roboto Slab', serif; color:#306"><b>DỄ</b></h2>
</button>
</a>
</td>
</tr>
</table>
Mã nguồn cài đặt hiển thị và trả lời câu hỏi
<div class="row" align="center">
<div class="col-md-2 col-xs-1 col-md-offset-2 col-xs-offset-2">
<h3><font color="#004800"><span id="rank"></span></font></h3>
</div>
<div class="col-md-1 col-xs-1 col-xs-offset-1">
<h3><font color="#004800"><span class="glyphicon glyphicon glyphicon-ok-circle" aria-hidden="true" id="correct"></span><b></b></font></h3>
</div>
<div class="col-md-1 col-xs-1 col-xs-offset-1">
<h3><font color="#990000"><span class="glyphicon glyphicon glyphicon-remove-circle" aria-hidden="true" id="incorrect"></span><b></b></font></h3>
</div>
</div>
<div class="row" align="center">
<div class="row" align="center">
<div class="col-md-2 col-md-offset-5 ">
<b>
<p id="run"></p>
</b>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h4 id="h-typeOfQuestions"></h4>
<img id="anh" src="" alt="">
</div>
<div class="col-md-6 col-md-offset-3">
<h1 style="font-family: 'Roboto Slab', serif; color:#C00; font-weight:bold " id="h-questions" class="text-center"></h1>
</div>
</div>
<div class="row " align="center">
<div class="col-md-1 col-xs-3 col-md-offset-4 ">
<h2 style="font-family: 'Roboto Slab', serif; color:#006"><label for="" id="0"></label></h2>
<input type="checkbox" id="a" name="pop" value="a" onclick="submitAnswer()">
</div>
<div class="col-md-1 col-xs-3 ">
<h2 style="font-family: 'Roboto Slab', serif; color:#006"><label for="" id="1"></label></h2>
<input type="checkbox" id="b" name="pop" value="b" onclick="submitAnswer()">
</div>
<div class="col-md-1 col-xs-3 ">
<h2 style="font-family: 'Roboto Slab', serif; color:#006"><label for="" id="2"></label></h2>
<input type="checkbox" id="c" name="pop" value="c" onclick="submitAnswer()">
</div>
<div class="col-md-1 col-xs-3 ">
<h2 style="font-family: 'Roboto Slab', serif; color:#006"><label for="" id="3"></label></h2>
<input type="checkbox" id="d" name="pop" value="d" onclick="submitAnswer()">
</div>
</div>
<div class="row">
<div class="col-md-2 col-xs-8 col-md-offset-4 col-xs-offset-2">
<button type="button" class="button btn-danger btn-lg" onclick="render()">Câu tiếp </button>
</div>
<div class="col-md-2 col-xs-6 " id="font">
<h3 id="end"></h3>
</div>
</div>
</div>
var count = -1;
var correct = 0;
var incorrect = 0;
function render(){
if(count == (questions.length -1) ){
if(correct>=4)
{
document.getElementById("end").innerHTML = "<a href='../Man2/5.2.html'><b>Qua màn</b></a>";
document.getElementById("end").style.fontFamily = "Roboto Slab,sans-serif";
}
else {
document.getElementById("end").innerHTML= "<a href='./5.1.html'><b>Chơi lại</b></a>";
document.getElementById("end").style.fontFamily = "Roboto Slab,sans-serif";
}
return true;
}
count++;
document.getElementById("run").innerHTML = " ";
document.getElementById("a").checked = false;
document.getElementById("b").checked = false;
document.getElementById("c").checked = false;
document.getElementById("d").checked = false;
document.getElementById("h-typeOfQuestions").innerHTML = typeOfQuestions[count];
if(typeOfQuestions[count] == " "){
document.getElementById("h-questions").innerHTML = " ";
document.getElementById("anh").src = questions[count];
document.getElementById("anh").width = "500";
document.getElementById("anh").height = "200";
} else {
document.getElementById("h-questions").innerHTML = questions[count];
}
document.getElementById("a").disabled = false;
document.getElementById("b").disabled = false;
document.getElementById("c").disabled = false;
document.getElementById("d").disabled = false;
document.getElementById("0").innerHTML = choices[count][0];
document.getElementById("1").innerHTML = choices[count][1];
document.getElementById("2").innerHTML = choices[count][2];
document.getElementById("3").innerHTML = choices[count][3];
document.getElementById("a").value = choices[count][0];
document.getElementById("b").value = choices[count][1];
document.getElementById("c").value = choices[count][2];
document.getElementById("d").value = choices[count][3];
document.getElementById("rank").innerHTML = count + 1 + "/" + questions.length;
}
function submitAnswer(){
var ans;
useranswers = document.getElementsByName("pop");
for(var i =0;i< useranswers.length; i++){
if(useranswers[i].checked){
ans = useranswers[i].value;
} else {
useranswers[i].disabled = true;
}
}
if(ans == answers[count]){
console.log("helpp");document.getElementById("run").innerHTML = "Chính Xác!";
document.getElementById("run").style.color = "green";
document.getElementById("run").style.fontSize= "xx-large";
console.log(correct);
correct = correct + 1;
document.getElementById("correct").innerHTML = correct;
}
else{
document.getElementById("run").innerHTML = "Sai rồi!" ;
document.getElementById("run").style.color = "red";
document.getElementById("run").style.fontSize = 'xx-large';
console.log(incorrect);
incorrect = incorrect + 1;
document.getElementById("incorrect").innerHTML = incorrect;
}
}
Mã nguồn cài đặt Ảnh
<div class="col-md-3">
<h2><b><span style="font-family: 'Roboto Slab', serif; color:#660033">Học số</span></b></h2>
<a class="example-image-link" href="http://i.imgur.com/WDzxX9S.jpg" data-lightbox="example-set"><img class="example-image" src="http://i.imgur.com/kLhjW6t.jpg" alt="" /></a>
</div>
<div class="col-md-3">
<h2><b><span style="font-family: 'Roboto Slab', serif; color:#660033">Học hình học</span></b> </h2>
<a class="example-image-link" href="http://i.imgur.com/Arhu48c.jpg" data-lightbox="example-set"><img class="example-image" src="http://i.imgur.com/S9KR3Nc.jpg" alt="" /></a>
</div>
<div class="col-md-3">
<h2><b><span style="font-family: 'Roboto Slab', serif; color:#660033">Tính chất cơ bản</span></b> </h2>
<a class="example-image-link" href=" http//i.imgur.com/MaJll9g.jpg" data-lightbox="example-set" ><img class="example-image" src="http://i.imgur.com/9g0v0qN.jpg" alt="" /></a>
</div>
<div class="col-md-3">
<h2><b><span style="font-family: 'Roboto Slab', serif;color:#660033">Học bảng cửu chương</span></b> </h2>
<a class="example-image-link" href="http://i.imgur.com/fGWeczl.jpg" data-lightbox="example-set"><img class="example-image" src="http://i.imgur.com/FPiaNaj.jpg" alt="" /></a>
</div>
Mã nguồn cài đặt Video
var app = angular.module('app', []);
app.controller('control', ['$scope', function ($scope) {
$scope.Videos = [false, false];
$scope.playVideo1 = function() {
$scope.Videos[0] = ! $scope.Videos[0]
}
$scope.playVideo2 = function() {
$scope.Videos[1] = ! $scope.Videos[1]
}
$scope.playVideo3 = function() {
$scope.Videos[2] = ! $scope.Videos[2]
}
$scope.playVideo4 = function() {
$scope.Videos[3] = ! $scope.Videos[3]
}
$scope.playVideo5 = function() {
$scope.Videos[4] = ! $scope.Videos[4]
}
$scope.playVideo6 = function() {
$scope.Videos[5] = ! $scope.Videos[5]
}
$scope.playVideo7 = function() {
$scope.Videos[6] = ! $scope.Videos[6]
}
$scope.playVideo8 = function() {
$scope.Videos[7] = ! $scope.Videos[7]
}
}])
<div class="col-md-5 col-md-offset-1" ng-controller="control">
<center>
<h2><b><span style="font-family: 'Roboto Slab', serif;color:#660033">Các phép tính cơ bản</span></b></h2>
</center>
<div class="list-group">
<b>
<button type="button" class="list-group-item" ng-click="playVideo1()"><span style="font-family: 'Roboto Slab', serif;"><b>Phép tính cộng</b></span></button>
<iframe ng-show="Videos[0]" width="100%" height="400" src="https://www.youtube.com/embed/E2jxM8r_kA4?list=PLAH_Bdis82-DTUwMKtQK3NphHMzDNfRwa" frameborder="0" allowfullscreen></iframe>
<button type="button" class="list-group-item" ng-click="playVideo2()"><span style="font-family: 'Roboto Slab', serif;"><b>Phép tính trừ</b></span></button>
<iframe ng-show="Videos[1]" width="100%" height="400" src="https://www.youtube.com/embed/eWLdxLa7w5Y?list=PLAH_Bdis82-CFfaLwHweW1ucBmXy_qdQX" frameborder="0" allowfullscreen></iframe>
<button type="button" class="list-group-item" ng-click="playVideo3()"><span style="font-family: 'Roboto Slab', serif;"><b>Phép tính nhân</b></span></button>
<iframe ng-show="Videos[2]" width="100%" height="400" src="https://www.youtube.com/embed/N2O8AsKoSs4?list=PLOrHt0CdT6FB-VmnvFZU86x6t9Sh9d0AO" frameborder="0" allowfullscreen></iframe>
<button type="button" class="list-group-item" ng-click="playVideo4()"><span style="font-family: 'Roboto Slab', serif;"><b>Phép tính chia</b></span></button>
<iframe ng-show="Videos[3]" width="100%" height="400" src="https://www.youtube.com/embed/L8GjSLLEIjw?list=PLAH_Bdis82-DgNUexyNRxBZrkZjYzwzOV" frameborder="0" allowfullscreen></iframe>
</b>
</div>
</div>
<div class="col-md-5" ng-controller="control">
<center>
<h2><b><span style="font-family: 'Roboto Slab', serif;color:#660033">Học tính nhanh Vedic </span></b></h2>
</center>
<div class="list-group">
<b>
<button type="button" class="list-group-item" ng-click="playVideo5()"><span style="font-family: 'Roboto Slab', serif;"><b>Cộng nhanh các số với nhau</b></span></button>
<iframe ng-show="Videos[4]" width="100%" height="400" src="https://www.youtube.com/embed/CO8rWYO_s_c?list=PL7-YOByZ7iwxKZqPZQYc4uTcbY3rrWoZj" frameborder="0" allowfullscreen></iframe>
<button type="button" class="list-group-item" ng-click="playVideo6()"><span style="font-family: 'Roboto Slab', serif;"><b>Trừ nhanh các số với nhau</b></span></button>
<iframe ng-show="Videos[5]" width="100%" height="400" src="https://www.youtube.com/embed/PW3dfJh9Ohg?list=PL7-YOByZ7iwxKZqPZQYc4uTcbY3rrWoZj" frameborder="0" allowfullscreen></iframe>
<button type="button" class="list-group-item" ng-click="playVideo7()"><span style="font-family: 'Roboto Slab', serif;"><b>Nhân nhanh 2 số có 2 chữ số</b></span></button>
<iframe ng-show="Videos[6]" width="100%" height="400" src="https://www.youtube.com/embed/aZJDfd0W-SE" frameborder="0" allowfullscreen></iframe>
<button type="button" class="list-group-item" ng-click="playVideo8()"><span style="font-family: 'Roboto Slab', serif;"><b>Chia nhanh các số với nhau</b></span></button>
<iframe ng-show="Videos[7]" width="100%" height="400" src="https://www.youtube.com/embed/h_AvNBt8zbU?list=PL7-YOByZ7iwxKZqPZQYc4uTcbY3rrWoZj" frameborder="0" allowfullscreen></iframe>
</b>
</div>
</div>