CSD Unit 1 - Problem Solving - is a highly interactive and collaborative introduction to the field of computer science, as framed within the broader pursuit of solving problems. You’ll practice using a problem solving process to address a series of puzzles, challenges, and real world scenarios. Next, you’ll learn how computers input, output, store, and process information to help humans solve problems. The unit concludes with a project in which you design an application that helps solve a problem of your choosing.
CSD Unit 2 - Web Development - students learn how to create and share the content on your own web pages. After deciding what content you want to share with the world, you’ll learn how to structure and style your pages using HTML and CSS. You’ll also practice valuable programming skills such as debugging and commenting. By the end of the unit, you’ll have a personal website that you can publish to the Internet.
CSD Unit 3 - Animations and Games - you’ll build on your coding experience as you program animations, interactive art, and games in Game Lab. The unit starts off with simple shapes and builds up to more sophisticated sprite-based games, using the same programming concepts and the design process computer scientists use daily. In the final project, you’ll develop a personalized, interactive program.
Following the link is the html coding used for the index page.
<!DOCTYPE html>
<html><a href="index.html"> Home</a>
<a href="lists.html"> Lists</a>
<a href="italic.html">Italic </a>
<head> <link rel="stylesheet" href="style.css">
</head>
<body style="background-color:#145A32;">
<h2> My random thought/experiments website</h2>
<h3 style="color:black;">Happy</h3>
<h3 style="color:orange;">Halloween </h3>
<p class="brightgreen">Does doing this count as a website? I mean, this is a paragraph, and that is a heading. </p>
<h4> Second Heading </h4>
<p class="greyblue">Hey look! Another heading! In a different size! Wow! And would you look at this! Another Paragraph! Amazing! I don't know what to do! Fantastic! I woke up at 5:00 am this morning! Great!</p>
<h4>oh no</h4>
<h5>I'm</h5>
<h6>shrinking</h6>
<h5>and</h5>
<h4>now</h4>
<h3>I'm</h3>
<h2>Growing</h2>
<p style="color:red;"> I am red</p>
<p style="color:blue;"> Blue? </p>
<p style="color:purple;"> Purple </p>
<p style="color:white;"> Hey look! I changed the backround color! </p>
<p style="color:orange;"> Orange </p>
<p style="color:yellow;"> yellow</p>
<p style="color:grey;"> grey</p>
<p style="color:pink;"> pink? </p>
<p style="color:lightgreen;"> light green</p>
<p style="font-family:courier;"> Courier</p>
<p style="font-family:courier;"> Thats cool! </p>
<p style="font-family:times;"> Times</p>
<p style="font-family:arial;"> Arial</p>
<p style="font-family:fantasy;"> Fantasy</p>
<p style="font-family:monospace;"> monospace</p>
<p style="font-family:sans-serif;"> sans-serif</p>
</body>
</html>
Following the link shows the code used.
button("Home_btn", "Back to Home");
onEvent("Home_btn", "click", function( ) {
setScreen("Home");
});
setPosition("Home_btn", 40, 380, 100, 50);
button("Quality", "Low");
button("Quality_2", "Medium");
hideElement("Quality_2");
button("Quality_3", "High");
hideElement("Quality_3");
onEvent("Quality", "click", function( ) {
console.log("Quality clicked");
deleteElement("Quality");
showElement("Quality_2");
});
onEvent("Quality_2", "click", function( ) {
console.log("Quality clicked");
deleteElement("Quality_2");
showElement("Quality_3");
});
textLabel("Quality_description", "Quality (Click/Tap to change)");
onEvent("Play_btn", "click", function( ) {
setScreen("Play");
});
onEvent("Plant_btn", "click", function( ) {
showElement("Palm_Tree3");
hideElement("Palm_Tree2");
showElement("Grow_btn");
showElement("Grow_btn2");
hideElement("Plant_btn");
});
onEvent("Settings_home_btn", "click", function( ) {
setScreen("Settings");
});
onEvent("Grow_btn3", "click", function( ) {
showElement("Palm_Tree2");
hideElement("Palm_Tree4");
hideElement("Palm_Tree5");
hideElement("Grow_btn3");
showElement("Cocoanut");
showElement("Grow_btn");
showElement("Grow_btn2");
});
hideElement("Grow_btn2");
hideElement("Grow_btn3");
onEvent("Grow_btn", "click", function( ) {
showElement("Palm_Tree4");
showElement("Grow_btn2");
hideElement("Palm_Tree3");
hideElement("Palm_Tree3");
hideElement("Grow_btn");
});
onEvent("Grow_btn2", "click", function( ) {
showElement("Palm_Tree5");
showElement("Grow_btn3");
hideElement("Grow_btn2");
});
onEvent("Collect_btn", "click", function( ) {
hideElement("Cocoanut");
hideElement("Palm_Tree2");
});