Skip to content

Instantly share code, notes, and snippets.

@damienh

damienh/gist:d954d985593d5ab2f25b

Created August 19, 2015 12:10
Show Gist options
  • Save damienh/d954d985593d5ab2f25b to your computer and use it in GitHub Desktop.
Save damienh/d954d985593d5ab2f25b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!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">
<title>ProjectName – Code Club</title>
<link rel="stylesheet" href="/assets/main-2a7e0e242618c238cd73c2ad7280dec6.css">
<script src="https://use.typekit.net/rmx3lvs.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<link rel="shortcut icon" href="/public/images/favicon.ico">
</head>
<body>
<nav class="navbar pdf-hidden">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="btn btn-secondary">Menu </span>
</button>
<a class="navbar-brand" href="/en-GB/"><img src="/public/images/nav/logo.svg" height="60px" width="60px"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="/en-GB/">Courses</a>
</li>
<li>
<a href="/en-GB/curriculum/">Curriculum</a>
</li>
<li>
<a href="/en-GB/resources/">Resources</a>
</li>
<li>
<a href="/en-GB/contribute/">Contribute</a>
</li>
</ul>
</div>
</div>
</nav>
<meta content="CodeClub" property="article:author">
<meta content="scratch" property="article:section">
<meta content="scratch" property="article:tag">
<meta content="article" property="og:type">
<meta content="CodeClub Projects" property="og:site_name">
<meta content="/en-GB/scratch/project-template/small_banner.png" property="og:image">
<meta content="Learn how to make a badge that shows your mood." property="og:description">
<meta content="https://codeclubprojects.org/en-GB/scratch/project-template/" property="og:url">
<meta name="project-sample" content="project-sample">
<section>
<header class="lesson" style="background: url(/en-GB/scratch/project-template/large_banner.png), url(/en-GB/scratch/large_banner.png); background-repeat: repeat;">
<div class="container">
<a class="pull-left pdf-hidden" href="/en-GB/scratch/">
<div class="icon-arrow-left">
</div>
Projects
</a>
</div>
<div class="container">
<h1>ProjectName</h1>
<a class="pdf-hidden btn btn-lesson" href="/en-GB/scratch/project-template/public/project-template.pdf">
<div class="icon-document-white">
</div>
PDF version
</a>
<a class="pdf-hidden btn btn-lesson" href="">
<div class="icon-download-white">
</div>
Project Materials</a>
<a class="pdf-hidden btn btn-lesson" href="ProjectName - notes.html">
<div class="icon-document-copy-white">
</div>
Teacher Notes</a>
</div>
</div>
</header>
</section>
<section>
<div class="container pdf-background">
<article>
<main class="lesson-steps center-block" role="main">
<section id="introduction" class="level1 intro">
<h1>Introduction</h1>
<p>Introduce the project here. What will children be creating? What is the objective of the project?</p>
<p>You can also add an embedded version of the final project, so that children can see what they are working towards. Don’t worry, children won’t be able to see your code!</p>
<div class="scratch-preview">
<p><iframe allowtransparency="true" width="485" height="402" src="https://scratch.mit.edu/projects/embed/32722912/?autostart=true" frameborder="0"></iframe> <img src="images/project-final.png" /></p>
</div>
</section>
<section id="step-1-step-name-goes-here" class="level1 activity">
<h1>Step 1: Step name goes here</h1>
<p>Briefly explain the outcome of this step.</p>
<section id="activity-checklist" class="level2 check">
<h2>Activity Checklist</h2>
<ul>
<li><p>The steps should be broken down into a number of checkpoints. You can add text in <strong>bold</strong> or <em>italics</em> to add emphasis to key words or important points.</p></li>
<li><p>Each checkpoint should clearly explain what the child needs to do.</p></li>
<li><p>To aid clarity, you can also include images, like this:</p>
<figure>
<img src="images/image.png" alt="screenshot" /><figcaption>screenshot</figcaption>
</figure></li>
<li><p>You should also regularly remind children to save their project:</p></li>
</ul>
</section>
<section id="save-your-project" class="level2 save">
<h2>Save your project</h2>
</section>
</section>
<section id="step-2-adding-scratch-blocks" class="level1 activity">
<h1>Step 2: Adding Scratch blocks</h1>
<p>This step shows how to add Scratch code to your project.</p>
<section id="activity-checklist-1" class="level2 check">
<h2>Activity Checklist</h2>
<ul>
<li><p>You can add Scratch code to your project like this:</p>
<pre class="blocks"><code> when flag clicked
point in direction (120 v)
set pen color to [#FF0000]
pen down
forever
move (1) steps
if on edge, bounce
end</code></pre>
<p>You can <a href="http://scratchblocks.codeclub.org.uk">test</a> your Scratch code, and there is a <a href="http://wiki.scratch.mit.edu/wiki/Block_Plugin/Syntax">guide</a> to adding Scratch blocks to your project notes.</p></li>
<li><p>You can also colour-code your text, to match the colour of Scratch blocks.</p>
<figure>
<img src="images/blocks.png" alt="screenshot" /><figcaption>screenshot</figcaption>
</figure>
<p>You can add:</p>
<ul>
<li><code class="blockmotion">Motion</code> blocks, for example <code class="blockmotion">move (10) steps</code> or <code class="blockmotion">if on edge, bounce</code>;</li>
<li><code class="blockevents">Event</code> blocks, for example <code class="blockevents">when flag clicked</code> or <code class="blockevents">when I receive [message v]</code>;</li>
<li><code class="blocklooks">Looks</code> blocks, for example <code class="blocklooks">show</code> or <code class="blocklooks">next costume</code></li>
<li><code class="blockcontrol">Control</code> blocks, for example <code class="blockcontrol">forever</code>, or <code class="blockcontrol">wait (1) secs</code>;</li>
<li><code class="blocksound">Sound</code> blocks, for example <code class="blocksound">play sound meow</code> or <code class="blocksound">stop all sounds</code>;</li>
<li><code class="blocksensing">Sensing</code> blocks, for example <code class="blocksensing">key space pressed</code> or <code class="blocksensing">ask ... and wait</code>;</li>
<li><code class="blockpen">Pen</code> blocks, for example <code class="blockpen">pen down</code> or <code class="blockpen">clear</code>;</li>
<li><code class="blockoperators">Operator</code> blocks, for example <code class="blockoperators">pick random 1 to 10</code> or <code class="blockoperators">10 * 2</code>;</li>
<li><code class="blockdata">Data</code> blocks for variables and lists, for example <code class="blockdata">score</code> or <code class="blockdata">change score by 1</code>;</li>
<li><code class="blockmoreblocks">More</code> blocks, for example <code class="blockmoreblocks">my function</code>.</li>
</ul></li>
</ul>
</section>
<section id="test-your-project" class="level2 flag">
<h2>Test your project</h2>
<p>You should regularly ask children to test their project, so that they can see the effects of the code they’re creating. You can even use these points as opportunities to fix bugs and improve code.</p>
</section>
<section id="save-your-project-1" class="level2 save">
<h2>Save your project</h2>
</section>
<section id="challenge-challenge-name" class="level2 challenge">
<h2>Challenge: Challenge name</h2>
<p>You should add at least 1 challenge, to allow children to apply what they’ve during the project. You can ask children to fix a problem or improve or adapt their project in some way.</p>
</section>
</section>
</main>
</article>
</div>
</section>
<section>
<div class="cta-3 pdf-hidden">
<div class="container">
<h1 class="text-center">Give us some feedback</h1>
<p>This project is new. That means we’re still testing it, and there’s a small chance there could be some bugs or typos. If you’re a club leader trying out this project, please help us and complete this short questionnaire to let us know how it went.</p>
<div class="extra-top-padding-2 extra-bottom-padding-1">
<a class="btn btn-big center-block" href="https://docs.google.com/forms/d/15QLeJ_aDklioXl5cUyUK1KqZ7lUhCiewl3qiwXOg41M/viewform">Give Feedback</a>
</div>
</div>
</div>
</section>
<section class="footer pdf-hidden">
<div class="container">
<div class="footer-nav">
<ul class="list-inline text-center">
<li>
<a href="/en-GB/">Courses</a>
</li>
<li>
<a href="/en-GB/curriculum/">Curriculum</a>
</li>
<li>
<a href="/en-GB/resources/">Resources</a>
</li>
<li>
<a href="/en-GB/contribute/">Contribute</a>
</li>
<li><a href="https://www.codeclub.org.uk/terms-and-conditions">Privacy &amp; Terms</a></li>
<!-- <li><button class="btn btn-secondary" type="submit">English <span class="caret"></span></button></li> -->
</ul>
<!-- <ul class="list-inline text-center">
<li><a href="/ar-EG/">العربية</a></li>
<li><a href="/ca-ES/">Català</a></li>
<li><a href="/de-DE/">Deutsch</a></li>
<li><a href="/en-GB/">English</a></li>
<li><a href="/es-ES/">Español</a></li>
<li><a href="/fr-FR/">Français</a></li>
<li><a href="/is-IS/">Íslenska</a></li>
<li><a href="/it-IT/">Italiano</a></li>
<li><a href="/nb-NO/">Norsk</a></li>
<li><a href="/pl-PL/">Polski</a></li>
<li><a href="/ru-RU/">русский язык</a></li>
<li><a href="/sv-SE/">Svenska</a></li>
<li><a href="/vi-VN/">Tiếng Việt</a></li>
</ul> -->
</div>
<div class="copyright center-block">
<p class="text-center">&copy; CodeClub World LTD. All rights reserved 2012-2015</p>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/public/js/jquery-1.11.2.min.js"><\/script>')</script>
<script src="/assets/bootstrap.min-8b9f8d66b5b56652f31b666757632c52.js"></script>
<script src="/assets/smooth-scroll-9b5d196c4dac2586d95e2b4d3f9eca25.js"></script>
<script>
smoothScroll.init();
</script>
<script src="/assets/scratchblocks2-250bea11390fbf282c09f4c6c2d7d86d.js"></script>
<script src="/assets/js.cookie-264ac4bea317f3a79035b5a717d24301.js"></script>
<script src="/assets/project-328b107aa7b8beae20951bb6baf443c7.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment