Skip to content

Commit

Permalink
Pseudocode page
Browse files Browse the repository at this point in the history
  • Loading branch information
nayakrujul committed Jan 27, 2024
1 parent 6bd787b commit f0c887f
Show file tree
Hide file tree
Showing 4 changed files with 193 additions and 20 deletions.
44 changes: 26 additions & 18 deletions CompSci/1-01-Computational-Thinking/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,12 @@
</head>

<body>
<h1>1.01 - Computational Thinking</h1>
<h1>1.01 &ndash; Computational Thinking</h1>

<p class="definition">
<img src="../icons/book.svg" class="icon" />
<strong>Computational thinking</strong> is all about the steps you take to find the best solution to a complex problem.
</p>

<p class="definition">
<img src="../icons/book.svg" class="icon" />
Expand All @@ -29,30 +34,33 @@ <h1>1.01 - Computational Thinking</h1>
<b>Algorithms do not have to be written in code.</b> However, algorithms are usually written in pseudocode or flowcharts.
</p>

<p>Example 1 shows an algorithm written in pseudocode.</p>
<p class="definition">
<img src="../icons/book.svg" class="icon" />
<strong>Algorithmic thinking</strong> means taking logical steps to get from the problem to the solution.
</p>

<p>
Algorithmic thinking can be used in everyday life, for example when building a Lego model.
</p>

<p class="code">
<img src="../icons/code.svg" class="icon" />
Example 1 <br />
<code>
total &larr; <el class="number">0</el> <br />
<el class="keyword">FOR</el> num &larr; <el class="number">1</el> <el class="keyword">TO</el> <el class="number">100</el> <br />
&ensp; total &larr; total + num <br />
<el class="keyword">ENDFOR</el> <br />
<el class="function">OUTPUT</el> total
</code>
<p class="definition">
<img src="../icons/book.svg" class="icon" />
<strong>Abstraction</strong> means ignoring or removing unnecessary details that don't matter and only focusing on the important information.
</p>

<p class="question">
<img src="../icons/question.svg" class="icon" />
What does the code in Example 1 do?
<p class="definition">
<img src="../icons/book.svg" class="icon" />
<strong>Decomposition</strong> is the process of breaking down a complex problem into smaller problems and solving each one individually.
</p>

<p class="spoiler">
<el class="default">Hover/tap to reveal</el>
<el class="answer">Sums all the numbers from 1 to 100 and outputs the result.</el>
<p>
Algorithmic thinking, abstraction and decomposition are the key techniques for computational thinking.
</p>

<br />

<a class="next-link" href="../1-02-Pseudocode-and-Flowcharts/">Next: 1.02 - Pseudo-code</a>

<br />
<br />

Expand Down
160 changes: 160 additions & 0 deletions CompSci/1-02-Pseudocode/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" href="../../main.css">
<link rel="stylesheet" href="../main.css">

<title>Computer Science Revision</title>

<link rel="icon" type="image/png" href="../icons/logo.svg"/>
<meta property="og:image" content="../icons/logo.svg" />
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="1.02 - Pseudo-code | Computer Science Revision">
</head>

<body>
<h1>1.02 &ndash; Pseudo-code</h1>

<a class="prev-link" href="../1-01-Computational-Thinking/">Previous: 1.01 - Computational Thinking</a>
<br /> <br />

<p class="definition">
<img src="../icons/book.svg" class="icon" />
<strong>Pseudo-code</strong> is a way of writing algorithms that reads like code written in actual programming languages.
</p>

<p>
<b>Pseudo-code is not a real programming language.</b>
The idea is that pseudo-code clearly shows an algorithm's steps without worrying about the syntax (finer details) of any particular programming language.
</p>

<p><br />There are three basic programming constructs which we use when writing pseudo-code:</p>

<p class="definition">
<img src="../icons/book.svg" class="icon" />
<strong>Sequence</strong> is just a mattter of writing of writing down the steps in the correct order.
</p>

<p class="definition">
<img src="../icons/book.svg" class="icon" />
<strong>Selection</strong> allows you to choose between multiple options.
</p>

<p>Example 1 shows how an <code>IF</code> statement can be used in pseudo-code.</p>

<p class="code">
<img src="../icons/code.svg" class="icon" />
Example 1 <br />
<code>
age &larr; <el class="function">USERINPUT</el> <br />
<el class="keyword">IF</el> age ≥ <el class="number">18</el> <el class="keyword">THEN</el> <br />
&ensp; <el class="function">OUTPUT</el> <el class="string">&quot;OK&quot;</el> <br />
<el class="keyword">ELSE</el> <br />
&ensp; <el class="function">OUTPUT</el> <el class="string">&quot;Too young&quot;</el> <br />
<el class="keyword">ENDIF</el>
</code>
</p>

<p class="definition">
<img src="../icons/book.svg" class="icon" />
<strong>Iteration</strong> means looping. There are three different types of loops in pseudo-code.
</p>

<p>Example 2 shows an algorithm containing a <code>FOR ... ENDFOR</code> loop. The algorithm asks the user for five numbers and outputs their sum.</p>

<p class="code">
<img src="../icons/code.svg" class="icon" />
Example 2 <br />
<code>
total &larr; <el class="number">0</el> <br />
<el class="keyword">FOR</el> count &larr; <el class="number">1</el> <el class="keyword">TO</el> <el class="number">5</el> <br />
&ensp; num &larr; <el class="function">USERINPUT</el> <br />
&ensp; total &larr; total + num <br />
<el class="keyword">ENDFOR</el> <br />
<el class="function">OUTPUT</el> total
</code>
</p>

<p>Example 3 shows an algorithm containing a <code>REPEAT ... UNTIL</code> loop. The algorithm counts up until the user stops it.</p>

<p class="code">
<img src="../icons/code.svg" class="icon" />
Example 3 <br />
<code>
count &larr; <el class="number">0</el> <br />
<el class="keyword">REPEAT</el> <br />
&ensp; count &larr; count + <el class="number">1</el> <br />
&ensp; <el class="function">OUTPUT</el> count <br />
&ensp; end &larr; <el class="function">USERINPUT</el> <br />
<el class="keyword">UNTIL</el> end = <el class="string">&quot;yes&quot;</el>
</code>
</p>

<p>Example 4 shows an algorithm containing a <code>WHILE ... ENDWHILE</code> loop. The algorithm keeps asking the user for a password until they get it correct.</p>

<p class="code">
<img src="../icons/code.svg" class="icon" />
Example 4 <br />
<code>
password &larr; <el class="function">USERINPUT</el> <br />
<el class="keyword">WHILE</el> password ≠ <el class="string">&quot;Password123&quot;</el> <br />
&ensp; <el class="function">OUTPUT</el> <el class="string">&quot;Try again&quot;</el> <br />
&ensp; password &larr; <el class="function">USERINPUT</el> <br />
<el class="keyword">ENDWHILE</el> <br />
<el class="function">OUTPUT</el> <el class="string">&quot;Correct password&quot;</el>
</code>
</p>

<p>
<code>REPEAT ... UNTIL</code> loops and <code>WHILE ... ENDWHILE</code> loops are very similar, but there are some key differences.
</p>

<p>
Firstly, <code>REPEAT ... UNTIL</code> loops keep looping <em>until</em> the condition is true,
whereas <code>WHILE ... ENDWHILE</code> loops keep looping <em>while</em> the condition is true.
</p>

<p>
Secondly, <code>REPEAT ... UNTIL</code> loops check the condition at the end, so will always run at least once,
but <code>WHILE ... ENDWHILE</code> loops check their condition at the start, so won't run if the condition starts off as false.
</p>

<p><br />Example 5 shows an algorithm written in pseudo-code.</p>

<p class="code">
<img src="../icons/code.svg" class="icon" />
Example 5 <br />
<code>
total &larr; <el class="number">1</el> <br />
<el class="keyword">FOR</el> num &larr; <el class="number">1</el> <el class="keyword">TO</el> <el class="number">10</el> <br />
&ensp; <el class="keyword">IF</el> num MOD <el class="number">2</el> = <el class="number">0</el> <el class="keyword">THEN</el> <br />
&ensp; &ensp; total &larr; total * num <br />
&ensp; <el class="keyword">ENDIF</el> <br />
<el class="keyword">ENDFOR</el> <br />
<el class="function">OUTPUT</el> total
</code>
</p>

<p class="question">
<img src="../icons/question.svg" class="icon" />
What does the code in Example 5 do?
</p>

<p><i>Hint: <code>num MOD 2</code> means the remainder from dividing <code>num</code> by <code>2</code>.</i><br />&nbsp;</p>

<p class="spoiler">
<el class="default">Hover/tap to reveal</el>
<el class="answer">Multiplies all the even numbers from 1 to 10 and outputs the result.</el>
</p>

<br />
<br />

<div id="sub">© Rujul Nayak <el id="year">2024-</el></div>
<script src="../../year.js"></script>
</body>
</html>
3 changes: 2 additions & 1 deletion CompSci/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,11 @@
<h1>Computer Science Revision</h1>


<h3>Chapter 1</h3>
<h3>Chapter 1 - Algorithms</h3>

<ul>
<li><a href="./1-01-Computational-Thinking/">1.01 - Computational Thinking</a></li>
<li><a href="./1-02-Pseudocode/">1.02 - Pseudo-code</a></li>
</ul>

<div id="sub">© Rujul Nayak <el id="year">2024-</el></div>
Expand Down
6 changes: 5 additions & 1 deletion CompSci/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,17 @@ p.spoiler:hover .answer{
}

.function {
color: #e47d00;
color: hotpink;
}

.number {
color: lightseagreen;
}

.string {
color: #e47d00;
}

.comment {
color: grey;
}
Expand Down

0 comments on commit f0c887f

Please sign in to comment.