-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·144 lines (136 loc) · 5.41 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Input Output practice questions" />
<meta name="keywords" content="one, two, three" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<title>Input Output practice questions</title>
<!-- external CSS link -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div>
<header>
<h1>Programming practice</h1>
</header>
<main>
<h2>
Input & Output practice <span><a href="variables.html">➡️</a></span>
</h2>
<nav>
<a href="#" class="btn" id="background">Background</a>
<a href="#" class="btn" id="inspire">Inspire me!</a>
<a href="#" class="btn" id="help">Help me!</a>
</nav>
<section class="background hidden">
<div class="tab-container">
<div class="tab-buttons">
<button class="tab-button active" data-tab="intro">
Introduction
</button>
<button class="tab-button" data-tab="output">Output</button>
<button class="tab-button" data-tab="variables">Variables</button>
<button class="tab-button" data-tab="input">Input</button>
<button class="tab-button" data-tab="together">
Putting It All Together
</button>
</div>
<div class="tab-content active" id="intro">
<h1>Input and Output in Python</h1>
<p>
The first step in our programming journey is input and output in
Python. These are super important skills that will help you
create interactive programs.
</p>
</div>
<div class="tab-content" id="output">
<h2>Output: Talking to the User</h2>
<p>
When we want our program to show something to the user, we use
the <code>print()</code> function. It's like making your
computer speak!
</p>
<div class="codeExample">
<code>print("Hello, I'm a Python program!")</code>
</div>
</div>
<div class="tab-content" id="variables">
<h2>Variables: Remembering Things</h2>
<p>
Variables are like boxes where we can store information. We can
give them names and put different types of data inside them.
</p>
<div class="codeExample">
<code>favourite_colour = "blue"</code>
</div>
</div>
<div class="tab-content" id="input">
<h2>Input: Listening to the User</h2>
<p>
The <code>input()</code> function lets us ask the user for
information. It's like giving the user a chance to speak to our
program!
</p>
<div class="codeExample">
<code>name = input("What's your name? ")</code>
</div>
</div>
<div class="tab-content" id="together">
<h2>Putting It All Together</h2>
<p>
We can use input, variables, and output together to make our
programs interactive. Here's a cool example:
</p>
<div class="codeExample">
<code>
nickname = input("What is your nickname? ")<br />
print(nickname, "is a great nickname!")
</code>
</div>
<p>
In this example, we ask for the user's nickname, store it in a
variable, and then use that variable to print a friendly
message.
</p>
<p>
Now it's your turn to try! Can you make a program that asks for
someone's favourite animal and then says something nice about
that animal? Press inspire me for more ideas of what to code.
</p>
</div>
</div>
</section>
<section class="example hidden">
<h3>
Write a program to...
<span id="topic"></span>
</h3>
<section class="cartoon1">
<img src="img/baseImage.webp" alt="" />
<p id="exampleQuestion"></p>
<p id="exampleAnswer"></p>
<p id="exampleResponse"></p>
</section>
<section class="code hidden">
<button id="copyMe" class="btn small-btn" pre="Click to copy code">
📋
</button>
<p id="question"></p>
<p id="response"></p>
</section>
</section>
</main>
<button id="forceSpongebob" class="btn small-btn" pre="Spongebob">
🧽
</button>
</div>
<script type="module" src="js/main.js"></script>
</body>
</html>