Skip to content
Snippets Groups Projects
Commit c82721cf authored by Xiaolong Liu's avatar Xiaolong Liu
Browse files

initial commit

parents
Branches gamification
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
bg.jpg 0 → 100644
+ 0
− 0
View file @ c82721cf
bg.jpg

41.7 KiB

img1.jpg 0 → 100644
+ 0
− 0
View file @ c82721cf
img1.jpg

13.5 KiB

index.html 0 → 100644
+ 35
− 0
View file @ c82721cf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>My first web</title>
</head>
<body>
<nav>
<div class="menu">
<div class="logo">
<a href="#">Xiaolong Liu </a>
</div>
<ul>
<li><a href="index1.html">Introduction</a></li>
<li><a href="index2.html">Turing</a></li>
<li><a href="index3.html">Reflection</a></li>
</ul>
</div>
</nav>
<div class="bg"></div>
<div class="center">
<div class="title"></div>
<div class="sub_title">Get Start</div>
<div class="btns">
<a href="index1.html">
<button > click me</button>
</a>
</div>
</body>
</html>
\ No newline at end of file
index1.html 0 → 100644
+ 76
− 0
View file @ c82721cf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My first web</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
</style>
<body>
<!-- 按钮 -->
<a href="index.html">
<button> home</button>
</a>
<a href="index2.html">
<button> next</button>
</a>
<h1 align="center"><i>An introductory guide to Computational Thinking</i></h1><br>
<h2 style="font-size: 20px;" align="left">What is the Computational Thinking? </h2><br>
<!-- 第一段 -->
<p style="font-size: 15px; background-color: rgb(237, 226, 212);"
align="left">
Based on the information found, there is no single consistent definition of 'Computational Thinking'(CT).
But essentially it involves the use of specific strategies and tools to solve complex problems.
BBC Bieesize provides a simple definition, which I won't dwell on here. It consists of four key techniques: Decomposition, Pattern Recognition, Abstraction, Algorithms.
Based on the above,then,my own understading of it is this.
I believe that CT can be thought of as a way of thinking that uses mathematical methods to solve problemssimply,rationally, and logically, a problem that includes not only problems taught in the classroom but also difficult problems in everyday life.
</p><br>
<h3 style="fsont-size: 20px;" align="right">Why it is important, and my current/future career ? </h3><br>
<!-- 第二段 -->
<p style="font-size: 15px;background-color: rgb(237, 226, 212);"
align="left">
Before I was exposed to this lesson,
I thought that code was difficult for me. But after I was exposed to this lesson,
it seemed to become easier. I think the first thing I need to learn how to write code is to have the ability to think computationally.
Once I have some computational thinking skills,I will be able to edit the code I want when I am faced with the task of building the logical framework before I edit the code,
then I'm likely to be tedious when I write the code later, and I may not be abe to edit the code without a clue.
But if I've the ability to think computationally,
I feel that I'll be able to solve these problemms easily when I face them. After compeleting this study, I currently want to work in front-end coding because I find it designable and interesting.Then in terms of future work, I can conceptualize the solution in my mind first, then use flowcharts to break down each step, and finally present it in code.
</p><br>
<!-- 第三段 -->
<p style="font-size: 15px; background-color: rgb(237, 226, 212);"
align="left">
Also,it had a positive impact on my life.
It enables me to deal with the problems in my life in a planned way. It can save me time, make me more efficient in my life and work,
and make me more rational.
Personally,I think it is the beginning of my learning computer code and the beginning of writing it.
</p><br>
<!-- 链接 -->
<a href="index2.html">A famous person</a><br><br>
<a href="index3.html">My reflection</a>
</body>
</html>
\ No newline at end of file
index2.html 0 → 100644
+ 101
− 0
View file @ c82721cf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>My first web</title>
</head>
<style>
p {
background-color: rgb(237, 226, 212);
}
</style>
<body>
<!-- 按钮 -->
<a href="index.html">
<button> home</button>
</a>
<a href="index3.html">
<button> next</button>
</a>
<a href="index1.html">
<button> back</button>
</a>
<div class="main">
<h1 align="center"> <i>A famous person</i></h1>
<!-- 第一段 -->
<p align="left">
In my opinion, the most famous person I know about in the field of computing is Alan Mathison
Turing.
He was born in 1912, and died in 1954.
He was a famous British mathematician and British logician, and he is known as the 'father of
computer
science'.
He was known to me through I saw a film called <i>The Imitation Game</i> once.
It tells a story of Alan Turing who was called up by the army during <i>World War Ⅱ</i> because of
his
mathematical achievements, then he joined the army organization and was assigned to the department
that
borke the famous German code <i>Enigma</i> He worked with his team to break the Egigma code, finally
they resulted in an Allied victory.
During that time, he invented a machine called 'Turing Machine'.
</p><br>
<!-- 图片 -->
<img src="img1.jpg" alt="Turing Test">
<!-- <div style="width: 220px ; height: 281px; float: left; background-image: url(img1.jpg); "> </div> -->
<!-- 第二段 -->
<p id="para2" align="left">
After watching this film, I knew about Turing.
This got me interested in easy calculations and is the reason I chose this profession.
Then I learned a bit about him and concluded that he had a significant role in the field of
computing.
During the war, he invented a simple 'computer' based on mathematical laws, which greatly improved
the
efficiency of decryption.
Even when his proposal to build the machine was misunderstood and he was unacceptable by others. He
still stood up for himself and succeeded in convincing others through his own practice again and
again.
I admire him for his self-assertion and his academic rigour. After the war, he further regined the
'computer' which we now name 'Turing Machine' after him, in recognition of his contribution to us.
He was still good at mathematician.
In his early years of mathematical research, he proposed 'The Turing Test', a test to verify whether
a computer has artificial intelligence, which is still used in our daily lives now.
</p>
<br>
<div class="clear"></div>
<!-- 第三段 -->
<p align="left" style="width: 100%;">
His invention of the 'Turing Machine' was the foundation of modern computing, and his idea of
artifical
intelligence is still used in our lives today, so I think he is a founding father in the field of
computing.
In his memory, the ACM had established the Turing Award to recognise outstanding contributions to
the
field of computing.
</p>
<br>
</div>
</body>
</htm1>
\ No newline at end of file
index3.html 0 → 100644
+ 89
− 0
View file @ c82721cf
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>My first web</title>
</head>
<style>
/* 第一段字母放大 */
p{
first-letter: font-size 2em;
}
</style>
<body>
<a href="index.html">
<button>home</button>
</a>
<a href="index2.html">
<button>back</button>
</a>
<h1 align="center">
<i>My reflection</i></h1>
<p style="background-color: rgb(237, 226, 212); " align="left">
Through my learning of computational thinking, as I said earlier.
It was my key to unlocking the key to writing computer code.
I think that if I hadn't learned this lesson, I would still not have established a proper logic of thinking about writing code difficult and complicated.
This would have been intimidating to my learning of the course and dertrimental to my learning of programming. But when I got exposed to it, I felt as if code wasn't so hard for me! I feel excited because I'm going to start designing a web page of my own.
</p>
<br>
<p style="background-color: rgb(237, 226, 212);" align="left">
Of course, apart from all these exciting things, I also encountered a lot of difficulties during the learning process.
For example, I was always unable to make the page jump in the pre-production of the wbe page, and when I kept trying to do this, it always ended up in failure. I kept looking for information, modifying the code, and trying, eventually I succeeded.
As I continued to learn, I deepened my understanding of computational thinking in the process.
I think it is more than just a way of computing, it's about first making a problem abstract, the decomposing it, devising a solution, and finally solving the abstract problem through appropriate computer science.
Computational thinking literally means using mathematical and computational approaches to solve problems, but essentially means that humans apply their own solutions to rational computer behavior to explain the problem.
It includes, but is not limited to, 'computation', similar to 'sets' and 'subsets' in mathematics.
It's inextricably linked to mathematical thinking, computational thinking, etc., and even to engineering thinking.
As I mentioned on the first page, computational thinking allows me to be more efficient.
Then it plays a subtle role noyt only in computing but in all aspects.
For example, 'computational + mathematics' leads to 'artifical intelligence', 'computing + engineering' leads to 'automation', 'computing + life(APP)' leads to 'Google Map'.
This shows that we're all using computational thinking. It's important to create models that make sense and simplify the steps because this is what humans have.
When we write code, we use our knowledge of mathematics to build a good model, our knowledge of programming to write a language that the computer can recognize, and finally the computer output.
</p>
<br>
<p style="background-color: rgb(237, 226, 212);" align="left">
Combining what I have found out, when computer thinking and mathematics are combined to design a new algorithm and apply the algorithm to artificial intelligence, it may solve the concerns we have been having about artificial intelligence in terms of whether or not it has human thinking.
Continuing to build on what we have now, designing a new computer language that will be simpler and easier to learn, but designing more powerful models, in terms of artificial intelligence, we need to enhance predictive analysis, then advance predictions will be faster and the analysis will be more comprehensive.
And I have found that the various apps I use in my life are not accurate when it comes to voice recognition, due to the accent of each person leading to inaccurate and inaccurate recognition, with the result that when I want to go to place A, I end up arriving at place B.
When I don't understand what someone means using translation software, what it translates to is ambiguous.
At the same time, people around me will have their own dissatisfaction. As a developer, if it doesn't make users happy, it won't get enough downloads, and ultimately the developer of this software won't have a satisfactory financial income and at the same time it won't have a need to exist.
All in all, we still need to keep exploring.
</p>
<br>
<hr>
<p>Reference:</p><br>
<p>Turing,Sara.; Davis, Martin.; Turing, John. 2012. <i>Alan M.Turing</i>. Centenary ed. Cambridge : Cambridge University Press.</p><br>
<p>Shieber, Stuart M. 2004. <i>The Turing test : verbal behavior as the hallmark of intelligence</i>. Stuart M. Shieber. Cambridge, Massachusetts : Mit Press.</p><br>
<p>Boden, Margaret A. C1996. <i>Artificial intelligence</i>. 2nd ed. San Diego : Academic Press.</p><br>
<p>Ahmed, Mohiuddin.; Islam, Sheikh Rabiul.; Anwar, Adnan, (Computer scientist).; Moustafa, Nour.; Pathan, Al-Sakib Khan. 2022. <i>Explainable Artificial Intelligence for Cyber Security : Next Generation Artificial Intelligence</i>.
1st edition. Cham : Springer International Publishing AG.</p><br>
<p>CT-<i>BBC<i><a href="https://www.bbc.co.uk/bitesize/guides/zp92mp3/revision/1"> introductory of CT(BBC)</a></p>
<p>CT-<i>wikipedia<i><a href="https://en.wikipedia.org/wiki/Computational_thinking"> introductory of CT(wiki)</a></p>
</p>
</body>
</html>
\ No newline at end of file
style.css 0 → 100644
+ 173
− 0
View file @ c82721cf
body {
background-image: url(bg.jpg);
background-color: transparent;
width: 100%;
height: 100vh;
background-position: center;
background-size: cover;
position: relative;
}
h1 {
font-size: 25px;
}
p {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 15px;
line-height: 1.6em;
}
.clear {
clear: both;
}
#para2 {
width: 91%;
float: right;
margin: 10px 0;
}
.main img {
display: block;
width: 9%;
height: auto;
float: left;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', Courier, monospace;
}
::selection {
color: rgb(18, 47, 73);
background: #fff;
}
nav {
position: fixed;
background: rgb(155, 136, 110);
width: 100%;
padding: 10px 0;
z-index: 10;
}
nav .menu {
max-width: 1250px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.menu .logo a {
text-decoration: none;
color: #fff;
font-size: 35px;
font-weight: 600;
}
.menu ul {
display: inline-flex;
}
.menu ul li {
list-style: none;
margin-left: 7px;
}
.menu ul li:first-child {
margin-left: 0px;
}
.menu ul li a {
text-decoration: none;
color: #fff;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
transition: all 0.3s ease;
}
.menu ul li a:hover {
background: #fff;
color: rgb(86, 123, 156);
}
.bg {
background: url(./bg.jpg) no-repeat;
width: 100%;
height: 100vh;
background-position: center;
background-size: cover;
position: relative;
}
.bg::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.center {
position: absolute;
top: 52%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
padding: 0 20px;
text-align: center;
}
/* .center .tittle{
color: #fff;
font-size: 55px;
font-weight: 600;
} */
.center .sub_title {
color: rgb(155, 136, 110);
font-size: 48px;
font-weight: 600;
}
.center .btns {
margin-top: 28px;
}
.center .btns button {
height: 55px;
width: 170px;
border-radius: 5px;
margin: 0 10px;
border: 2px solid wheat;
font-size: 20px;
font-weight: 500;
padding: 5px 10px;
cursor: pointer;
outline: none;
transition: all 0.3 ease;
}
.center .btns button:first-child {
color: #fff;
background: none;
}
.center .btns button:first-child:hover {
background: none;
color: #fff;
}
.center .btns button:last-child {
background: white;
color: rgb(0, 0, 0);
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment