uccser / cs-field-guide Goto Github PK
View Code? Open in Web Editor NEWA free online interactive resource/textbook for high school students learning about computer science.
Home Page: https://www.csfieldguide.org.nz
License: MIT License
A free online interactive resource/textbook for high school students learning about computer science.
Home Page: https://www.csfieldguide.org.nz
License: MIT License
Move interactive from Computer Graphics chapter
<section id="teapot1Text">
Move interactive from Formal Languages chapter
<div align="center"><iframe width="450" height="450" src="_static/widgets/fsa-spin-graphic.html" frameborder="0" allowfullscreen>Your browser does not support iframes. Please contact the computer's administrator and upgrade to a modern browser (like Google Chrome) to enable all functionality of this online textbook.</iframe></div>
Move interactive from Formal Languages chapter
<div align="center"><iframe width="450" height="515" src="_static/widgets/fsa-trainsylvania-v4.html?map=puzzle1" frameborder="0">Your browser does not support iframes. Please contact the computer's administrator and upgrade <a href="http://browsehappy.com/"> to a modern browser</a> (like Google Chrome) to enable all functionality of this online textbook.</iframe></div>
Add the template for the languages file for interactives within base_files
folder, called lang.csv
.
Move interactive from Complexity and Tractability chapter
<div class="widget-holder"><a href="_static/widgets/big-calculator.html?plain=true frameborder="0"" target="_blank"><img class="widget-image" src="_static/complexity_and_tractability/images/CT-BigCalculatorThumbnail.png" alt=""><span class="widget-subtitle">Click to load<br>big number calculator</span></a></div>
Move interactive from data representation chapter
<div><iframe width="100%" height="500" src="_static/widgets/DR/DR-color/CG-ColorBits_2.html" frameborder="0"></iframe></div>
We are switching to Foundation, and existing Bootstrap code and documentation (mostly in interactive templates) needs to be replaced.
Move interactive from Computer Graphics chapter
<section id="test_text"></section><div align="center"><a href="" onclick="linkSend(this,'test_text','_static/widgets/CG/CG-mini-editor/main.html',null); return true" target="_blank"><img class="widgetimage" src="_static/widgets/CG/CG-mini-editor/CG-mini-editor.png" alt=""><br />Click to load the widget.</a></div><br />
Move interactive from data representation chapter
<div class="widget-holder"><a href="_static/widgets/DR/DR-base-conversion/public_html/index.html?base=16&columns=7&lines=A,B,C&offset=0" target="_blank"><img class="widget-image" src="_static/images/DR-BaseConversionHexidecimal.png" alt=""><span class="widget-subtitle">Click to load the widget</span></a></div>
The parsing of {interactive}
blocks needs to be implemented, after an interactive has been added to the project repository.
I will wait until an interactive is added so development and testing is easier.
Move interactive from data representation chapter
<div><iframe width="100%" height="520" src="_static/widgets/DR/DR-color/CG-ColorBits_4.html" frameborder="0"></iframe></div>
Move interactive from data representation chapter
<div><iframe width="100%" height="650" src="_static/widgets/DR/DR-color/CG-ColorBits_3.html" frameborder="0"></iframe></div>
Move interactive from Data Representation chapter
<div class="widget-holder"><a href="_static/widgets/DR/DR-base-conversion/public_html/index.html?base=2&columns=7&lines=A,B,C&offset=0" target="_blank"><img class="widget-image" src="_static/data_representation/images/DR-BaseConversionBinaryThumbnail.png" alt=""><span class="widget-subtitle">Click to load the<br>binary number interactive</span></a></div>
Move interactive from Computer Vision chapter
<a href="http://inspirit.github.com/jsfeat/sample_canny_edge.html" target="_blank">Open the edge detection interactive using this link and experiment with settings as below. You will need a webcam, and the widget will ask you to allow access to it.</a>
Move interactive from Computer Vision chapter
<a href="http://www.cosc.canterbury.ac.nz/csfieldguide/dev/dev/_static/widgets/cv-noise-filters.html" target="_blank">Open the noise reduction filtering interactive using this link and experiment with settings as below. You will need a webcam, and the widget will ask you to allow access to it.</a>
Move interactive from Formal Languages Chapter
<div align="center"><iframe width="450" height="350" src="_static/widgets/fsa-2state-v3.html?map=two" frameborder="0" allowfullscreen>Your browser does not support iframes. Please contact the computer's administrator and upgrade to a modern browser (like Google Chrome) to enable all functionality of this online textbook.</iframe></div>
Move interactive from Computer Graphics chapter
<section id="test_text">Multiple transforms</section><div align="center"><a href="" onclick="linkSend(this,'test_text','_static/widgets/CG/CG-matrix-simplifier/CG-matrix-simplifier.html',null); return true" target="_blank"><img class="widgetimage" src="_static/widgets/CG/CG-matrix-simplifier/CG-image.png" alt=""><br />Click to load the widget.</a></div><br />
Move interactive from Coding Encryption chapter
<div class="col-xs-12 col-md-6 col-md-offset-3">
<div class="row panel panel-default">
<div class="panel-heading">RSA Encrypter & Decrypter</div>
<div class="panel-body">
<div class="row">
<form id="modeSelect" class="form-horizontal" role="form">
<div class="form-group">
<label class="col-xs-2 control-label text-right">Mode</label>
<div class="col-xs-9">
<label class="radio-inline">
<input type="radio" name="modeSelect" id="encrypt" onchange="modeChanged('Encrypt')" checked="true"> Encrypt </input>
</label>
<label class="radio-inline">
<input type="radio" name="modeSelect" id="decrypt" onchange="modeChanged('Decrypt')"> Decrypt </input>
</label>
</div>
</div>
<div class="form-group">
<label for="key" class="col-xs-2 control-label text-right">Key</label>
<div class="col-xs-9">
<textarea id="key" class="form-control" rows="2" placeholder="Put an RSA key here"></textarea>
</div>
</div>
<div class="form-group">
<label for="text_to_encrypt" class="col-xs-2 control-label text-right">Text</label>
<div class="col-xs-9">
<textarea id="text_to_encrypt" class="form-control" rows="3" placeholder="Put the text to encrypt or decrypt here"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-4">
<input type="button" id="generate" onclick="encodeText()" value="Encrypt with Key" class="btn btn-primary btn-block">
</div>
</div>
<div class="form-group" id="output-group">
<label for="output" class="col-xs-2 control-label text-right">Output</label>
<div class="col-xs-9">
<textarea id="output" class="form-control" rows="3" readonly="" placeholder="Output will appear here"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="clearfix visible-xs-block"></div>
All underscores used in filenames and syntax need to be replaced with dashes for readability and better Google SEO. Python code can continue to use underscores.
General rule: Users use dashes, developers may use underscores.
Move interactive from Complexity and Tractability Chapter
<div align="center"><iframe width="700" height="500" src="_static/widgets/tract-tsp-basic-v2.html" frameborder="0"></iframe></div>
Move interactive from Encryption Coding chapter
<div class="widget-holder"><a href="_static/widgets/big-calculator.html?plain=true frameborder="0"" target="_blank"><img class="widget-image" src="_static/complexity_and_tractability/images/CT-BigCalculatorThumbnail.png" alt=""><span class="widget-subtitle">Click to load<br>big number calculator</span></a></div>
Move interactive from Computer Vision chapter
<a href="http://inspirit.github.com/jsfeat/sample_haar_face.html" target="_blank">Open the face recognition interactive using this link and experiment with the settings. You will need a webcam, and the widget will ask you to allow access to it.</a>
Move interactive from data representation chapter
<div class="widget-holder"><a href="_static/widgets/DR/DR-base-conversion/public_html/index.html?base=2&columns=14&lines=A,B,C&offset=-8" target="_blank"><img class="widget-image" src="_static/images/DR-BaseConversionBinaryDecimals.png" alt=""><span class="widget-subtitle">Click to load the widget</span></a></div>
Move interactive from from Formal Languages chapter
<div align="center"><iframe width="810" height="630" src="_static/widgets/FL/FL-Regex/RegexTxt.html" frameborder="0">Your browser does not support iframes. Please contact the computer's administrator and upgrade <a href="http://browsehappy.com/"> to a modern browser</a> (like Google Chrome) to enable all functionality of this online textbook.</iframe></div>
Add a diagram for the Turing Test section in the AI chapter. Example can be found on [wikipedia.org](http://en.wikipedia.org/wiki/File:Turing_Test_version_3.png is an example).
Remove photoslider from Compression Coding chapter
<p class="text-center">Move your cursor or tap the image to compare the two images</p>
<!-- Code provided by http://codepen.io/dudleystorey/pen/JDphy -->
<!-- Photo from http://www.publicdomainpictures.net/view-image.php?image=101219&picture=fisherman-bait-casting -->
<div style="width: 90%; margin: 0 auto; padding-bottom: 20px;">
<div id="inked-painted">
<img src="_static/images/cc-introduction-high.jpg" id="inked" alt>
<div id="colored"></div>
</div>
</div>
<p class="text-center"><b>Left is low quality JPEG (20Kb) - Right is high quality JPEG (88Kb)</b></p>
Move interactive from Encryption Coding chapter
<div class="interactive row">
<div class="col-xs-12 col-sm-4">
<h4>Plaintext</h4>
<textarea id="caesar-plaintext" class="form-control" rows="5"></textarea>
<button id="caesar-encrypt" type="button" class="btn btn-primary btn-block" style="margin-top:10px;">Encrypt</button>
</div>
<div class="col-xs-12 col-sm-4">
<h4>Rotation Amount</h4>
<input id="rotation-input" type="number" min="1" max="26" value="1" onkeydown="return isNumber(event,this);" class="interactive-input">
</div>
<div class="col-xs-12 col-sm-4">
<h4>Ciphertext</h4>
<textarea id="caesar-ciphertext" class="form-control" rows="5"></textarea>
<button id="caesar-decrypt" type="button" class="btn btn-primary btn-block" style="margin-top:10px;">Decrypt</button>
</div>
</div>
Move interactive from Coding Compression chapter
<div class="widget-holder"><a href="_static/interactives/cc/run-length-encoding/index.html" target="_blank"><img class="widget-image" src="_static/interactives/cc/run-length-encoding/thumbnail-full.png" alt=""><span class="widget-subtitle">Click to load<br>Run Length Encoding</span></a></div>
<p class="text-center">Created by Hannah Taylor</p>
Move interactive from Formal Languages chapter
<div align="center"><iframe width="450" height="350" src="_static/widgets/fsa-trip-planner-v4.html" frameborder="0" allowfullscreen>Your browser does not support iframes. Please contact the computer's administrator and upgrade to a modern browser (like Google Chrome) to enable all functionality of this online textbook.</iframe></div>
Move interactive from Computer Graphics chapter
<p id="arrowEx13Text">Try putting in the final matrix here and see if it does scale by 2 and rotate by 45 degrees.</p><div align="center"><a href="" onclick= "linkSend(this, 'arrowEx13Text', '_static/widgets/CG/CG-arrow/CG-arrow-singlematrix.html','&zoom=-10.0 &quiz=1.4 1.4 0 0 -1.4 1.4 0 0 0 0 1 0 0 0 0 1 &allPrize=5'); return true" target="_blank"><img class="widgetimage" src="_static/widgets/CG/CG-arrow/CG-arrow-example1.png" alt=""><br />Click to load the widget.</a></div><br />
Move interactive form Formal Languages chapter
<div align="center"><iframe width="450" height="450" src="_static/widgets/fsa-strangelight-v3.html" frameborder="0" allowfullscreen>Your browser does not support iframes. Please contact the computer's administrator and upgrade to a modern browser (like Google Chrome) to enable all functionality of this online textbook.</iframe></div>
The following sections require NZ teachers notes to be extracted and moved to assessment guides:
Move interactive from data representation chapter
<div class="widget-holder"><a href="_static/interactives/dr/pixel-values/index.html" target="_blank"><img class="widget-image" src="_static/interactives/dr/pixel-values/thumbnail.png" alt=""><span class="widget-subtitle">Click to load<br>Pixel Interactive</span></a></div>
Move interactive from Complexity and Tractability chapter
<div class="widget-holder"><a href="_static/widgets/tract-scaling-v2.html" target="_blank"><img class="widget-image" src="_static/images/CT-TimeCalculatorThumbnail.png" alt=""><span class="widget-subtitle">Click to load<br>big number calculator</span></a></div>
Move interactive from Network Communication Protocols chapter
<div class="widget-holder"><a href="_static/widgets/PacketAttack/" target="_blank"><img class="widget-image" src="_static/images/net-packet-attack.png" alt=""><span class="widget-subtitle">Click to play<br>Packet Attack</span></a></div>
Modify the cs-field-guide/interactives/base_files/README.md
to also act as a template for new interactives. It should have headings for areas that a new interactive's README should cover.
Move interactive from Human Computer Interaction chapter
<div class="interactive">
<div id="interactive-deceiver-question" class="interactive-text"><br></div>
<div id="startButton" class="row">
<div class="col-xs-8 col-xs-offset-1 col-sm-4 col-sm-offset-4">
<button type="button" id="buttonStart" class="btn btn-success btn-block">Start</button>
</div>
</div>
<div id="gameButtons" class="row" style="display:none;" >
<div class="col-xs-4 col-xs-offset-2 col-sm-2 col-sm-offset-4">
<button type="button" id="buttonLeft" class="btn btn-default btn-block interactive-deceiver-button">No</button>
</div>
<div class="col-xs-4 col-sm-2">
<button type="button" id="buttonRight" class="btn btn-default btn-block interactive-deceiver-button">Yes</button>
</div>
</div>
<div id="interactive-deceiver-feedback-container">
<div id="interactive-deceiver-feedback" class="interactive-text"><br></div>
</div>
<div id="interactive-deceiver-timer" class="interactive-text"><span id="interactive-deceiver-seconds">15</span> seconds left</div>
</div>
Move interactive from formal languages chapter
<div align="center"><iframe width="830" height="620" src="_static/widgets/FL/FL-Regex/RegexDic.html" frameborder="0">Your browser does not support iframes. Please contact the computer's administrator and upgrade <a href="http://browsehappy.com/"> to a modern browser</a> (like Google Chrome) to enable all functionality of this online textbook.</iframe></div>
Move interactive from data representation chapter
<div><iframe width="100%" height="270" src="_static/widgets/DR/DR-color/CG-ColorBits_1.html" frameborder="0"></iframe></div>
Move interactive from Computer Graphics chapter
<section id="test_text"></section><div align="center"><a href="" onclick="linkSend(this,'test_text','_static/widgets/CG/CG-matrix-simplifier/CG-matrix-simplifier.html',null); return true" target="_blank"><img class="widgetimage" src="_static/widgets/CG/CG-matrix-simplifier/CG-image.png" alt=""><br />Click to load the widget.</a></div><br />
Move interactive from Human Computer Interaction chapter
<div class="widget-holder"><a href="_static/widgets/HCI/HCI-Delay/index.html" target="_blank"><img class="widget-image" src="_static/images/hci-delay-thumbnail.png" alt=""><span class="widget-subtitle">Click to load the<br>delay interactive</span></a></div>
The regex101.com website has explanation of regex components and may be useful for the regex sections.
The old computer graphics chapter used the following script for loading links:
<script>function linkSend(hrefID, capture_id, linkTo, parms){hrefID.href=linkTo+"?info="+ encodeURI(document.getElementById(capture_id).innerHTML);if(parms != null) hrefID.href += encodeURI(parms);}</script>
This needs to be replaced for the new style of interactive linking.
The original ReST text can be found here (this is only viewable by original authors).
Move (or replace with new interactives) from Error Control Coding chapter
<p><a href="_static/interactives/ec/isbncreditcardcheckerv2.xlsx">Click here to download the spreadsheet.</a></p>
Move interactive from data representation chapter
<link rel="stylesheet" href="_static/interactives/dr/dr_inline_interactives.css" type="text/css" />
<script type="text/javascript" src="_static/interactives/dr/dr_inline_interactives.js"></script>
<script type="text/javascript" src="_static/interactives/dr/jquery-ui.min.js"></script>
<div class="interactive row text-center">
<h4>CMY Colour Mixer</h4>
<div class="col-xs-12 col-sm-4">
<label for="cyan-colour">Cyan</label>
<div id="cyan-colour" class="slider"></div>
<label class="pull-left">0</label>
<label id="cyan-value"></label>
<label class="pull-right">255</label>
</div>
<div class="col-xs-12 col-sm-4">
<label for="magenta-colour">Magenta</label>
<div id="magenta-colour" class="slider"></div>
<label class="pull-left">0</label>
<label id="magenta-value"></label>
<label class="pull-right">255</label>
</div>
<div class="col-xs-12 col-sm-4">
<label for="yellow-colour">Yellow</label>
<div id="yellow-colour" class="slider"></div>
<label class="pull-left">0</label>
<label id="yellow-value"></label>
<label class="pull-right">255</label>
</div>
<div class="clearfix"></div>
<div class="col-xs-12" id="cmyk-colour-output">
</div>
</div>
Move interactive from Coding Compression chapter
<div align="center"><iframe width="900" height="460" src="_static/widgets/COMPRESSION/LWZ/public_html/index.html" frameborder="0">Your browser does not support iframes. Please contact the computer's administrator and upgrade <a href="http://browsehappy.com/"> to a modern browser</a> (like Google Chrome) to enable all functionality of this online textbook.</iframe></div>
Move interactive from Formal Languages chapter
<div align="center"><iframe width="450" height="350" src="_static/widgets/fsa-2state-v3.html?map=one" frameborder="0" allowfullscreen>Your browser does not support iframes. Please contact the computer's administrator and upgrade to a modern browser (like Google Chrome) to enable all functionality of this online textbook.</iframe></div>
Move interactive from Encryption Coding chapter
<div class="col-xs-12 col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-heading">RSA Key Generator</div>
<div class="panel-body">
<div class="row">
<form id="modeSelect" class="form-horizontal" role="form">
<div class="form-group">
<div class="col-xs-12 text-center">
<input type="button" id="generate" onclick="generate_new_keys()" value="Generate New Keys" class="btn btn-primary">
</div>
</div>
<div class="form-group">
<label for="pub_key" class="col-xs-3 control-label text-right">Public Key</label>
<div class="col-xs-8">
<textarea id="pub_key" class="form-control" rows="1" readonly="true"></textarea>
</div>
</div>
<div class="form-group">
<label for="priv_key" class="col-xs-3 control-label text-right">Private Key</label>
<div class="col-xs-8">
<textarea id="priv_key" class="form-control" rows="1" readonly="true"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="clearfix visible-xs-block"></div>
Move interactive from Error Control Coding Chapter
<div class="widget-holder"><a href="_static/widgets/DR/DR-Parity/public_html/index.html" target="_blank"><img class="widget-image" src="_static/images/EC-ParityThumbnail.png" alt=""><span class="widget-subtitle">Click to load the parity widget</span></a></div>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.