Merge branch 'develop' into issue/1020

csfieldguide/chapters/content/en/algorithms/sections/further-reading.md

@@ -1,7 +1,5 @@
 # Further reading
 
-## Other topics in algorithms
-
 - There is another searching algorithm which performs even better than binary search. It is called Hashing and can be investigated with the CS Unplugged [Battleships Game](http://csunplugged.org/searching-algorithms).
 - There are some problems for which no good algorithms have been found (and many people believe they will never be found). For more on these kinds of algorithms see the Complexity and Tractability chapter in the Field Guide.
 

csfieldguide/chapters/content/en/coding-encryption/sections/substitution-ciphers.md

@@ -1,5 +1,11 @@
 # Substitution ciphers
 
+A substitution cipher takes each character (sometimes groups of characters) in a message and replaces it with a different character according to fixed rules.
+Every occurrence of one character will be *substituted* with the same replacement character.
+
+An encrypted message can then be decrypted with another substitution cipher, this time set to substitute each character with the one that it originally replaced.
+It is a very simple system which, as we'll find out, makes it a very insecure method of encryption!
+
 {panel type="teacher-note"}
 
 # Starting with a very insecure cipher!
@@ -487,11 +493,11 @@ A can be substituted for any of the 26 letters in the alphabet, B can then be su
 
 This gives us 26 possibilities for A times 25 possibilities for B times 24 possibilities for C, all the way down to 2 possibilities for Y and 1 possibility for Z.
 
-``\[
+\[
 26 \times 25 \times 24 \times 23 \times 22 \times 21 \times 20 \times 19 \times 18 \times 17 \times\\
 16 \times 15 \times 14 \times 13 \times 12 \times 11 \times 10 \times 9 \times 8 \times 7 \times 6 \times\\
 5 \times 4 \times 3 \times 2 \times 1 = 26!
-\]``
+\]
 
 Representing each of these possibilities requires around 88 bits, making the cipher’s key size around 88 bits, which is below modern standards, although still not too bad!
 

csfieldguide/chapters/content/en/coding-error-control/sections/further-reading.md

@@ -1,7 +1,5 @@
 # Further reading
 
-## Useful links
-
 - [CS Unplugged parity trick](http://csunplugged.org/error-detection)
 - [CS4FN](http://www.cs4fn.org/) has a [free book](http://www.cs4fn.org/magic/) that contains the parity trick and a number of other tricks related to computer science.
 - Techradar has more [information about error detection and correction](http://www.techradar.com/news/computing/how-error-detection-and-correction-works-1080736)

csfieldguide/chapters/content/en/computer-graphics/sections/further-reading.md

@@ -1,7 +1,5 @@
 # Further reading
 
-## Useful links
-
 - [Computer graphics on Wikipedia](https://en.wikipedia.org/wiki/Computer_graphics)
 - [Transformation matrix on Wikipedia](https://en.wikipedia.org/wiki/Transformation_matrix)
 - [Bresenham's line algorithm on Wikipedia](https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm)

csfieldguide/chapters/content/en/computer-graphics/sections/graphics-transformations.md

@@ -607,14 +607,14 @@ For example, the 3D matrix for doubling the size of an object is as follows; it
 
 You can try out this 3D matrix in the following interactive.
 
-{button-link link="http://www.csfieldguide.org.nz/releases/1.9.9/_static/widgets/CG/CG-mini-editor/main%20(cutdown).html?info=%0AIn%20this%20interactive,%20try%20changing%20the%20scaling%20on%20the%20image%20(it%20starts%20with%20a%20scaling%20factor%20of%2010%20in%20all%20three%20dimensions)." text="Click for interactive: 3D transform matrix"}
+{button-link link="https://archive.csfieldguide.org.nz/1.9.9/_static/widgets/CG/CG-mini-editor/main%20%28cutdown%29.html?info=%0AIn%20this%20interactive,%20try%20changing%20the%20scaling%20on%20the%20image%20%28it%20starts%20with%20a%20scaling%20factor%20of%2010%20in%20all%20three%20dimensions%29" text="Click for interactive: 3D transform matrix"}
 
 The above image mesh has 3644 points in it, and your matrix was applied to each one of them to work out the new image.
 
 The next interactive allows you to do translation (using a vector).
 Use it to get used to translating in the three dimensions (don't worry about using matrices this time.)
 
-{button-link link="http://www.csfieldguide.org.nz/releases/1.9.9/_static/widgets/CG/CG-mini-editor/main%20(cutdown).html?info=%0ATranslation%20requires%203%20values,%20which%20are%20added%20to%20the%20*x*,%20*y*%20and%20*z*%20coordinates%20of%20each%20point%20in%20an%20object.%3Cp%3EIn%20the%20following%20interactive,%20try%20moving%20the%20teapot%20left%20and%20right%20(%20%3Cem%3Ex%3C/em%3E%20),%20up%20and%20down%20(%20%3Cem%3Ey%3C/em%3E%20),%20and%20in%20and%20out%20of%20the%20screen%20(%20%3Cem%3Ez%3C/em%3E%20)%20by%20adding%20a%20%E2%80%9Cvector%E2%80%9D%20to%20the%20operations.%20Then%20try%20combining%20all%20three.%3C/p%3E%0A" text="Click for interactive: 3D translation"}
+{button-link link="https://archive.csfieldguide.org.nz/1.9.9/_static/widgets/CG/CG-mini-editor/main%20%28cutdown%29.html?info=%0ATranslation%20requires%203%20values,%20which%20are%20added%20to%20the%20*x*,%20*y*%20and%20*z*%20coordinates%20of%20each%20point%20in%20an%20object.%3Cp%3EIn%20the%20following%20interactive,%20try%20moving%20the%20teapot%20left%20and%20right%20%28%20%3Cem%3Ex%3C/em%3E%20%29,%20up%20and%20down%20%28%20%3Cem%3Ey%3C/em%3E%20%29,%20and%20in%20and%20out%20of%20the%20screen%20%28%20%3Cem%3Ez%3C/em%3E%20%29%20by%20adding%20a%20%E2%80%9Cvector%E2%80%9D%20to%20the%20operations.%20Then%20try%20combining%20all%20three.%3C/p%3E%0A" text="Click for interactive: 3D translation"}
 
 Rotation is trickier because you can now rotate in different directions.
 In 2D rotations were around the center (origin) of the grid, but in 3D rotations are around a line (either the horizontal x-axis, the vertical y-axis, or the z-axis, which goes into the screen!)
@@ -657,15 +657,15 @@ The following interactive allows you to combine 3D matrices.
 
 {comment put in a sidebox on deriving the rotation matrices (one day) (maybe in the 2d part)}
 
-{button-link link="http://www.csfieldguide.org.nz/releases/1.9.9/_static/widgets/CG/CG-mini-editor/main%20(cutdown).html?info=%0AYou%20can%20experiment%20with%20moving%20the%20teapot%20around%20in%20space,%20changing%20its%20size,%20and%20angle.%3Cdl%20class=%22docutils%22%3E%0A%3Cdt%3EThink%20about%20the%20order%20in%20which%20you%20need%20to%20combine%20the%20transforms%20to%20get%20a%20particular%20image%20that%20you%20want.%3C/dt%3E%0A%3Cdd%3EFor%20example,%20if%20you%20translate%20an%20image%20and%20then%20scale%20it,%20you%E2%80%99ll%20get%20a%20different%20effect%20to%20scaling%20it%20then%20translating%20it.%0AIf%20you%20want%20to%20rotate%20or%20scale%20around%20a%20particular%20point,%20you%20can%20do%20this%20in%20three%20steps%20(as%20with%20the%202D%20case%20above):%20(1)%20translate%20the%20object%20so%20that%20the%20point%20you%20want%20to%20scale%20or%20rotate%20around%20is%20the%20origin%20(where%20the%20x,%20y%20and%20z%20axes%20meet),%20(2)%20do%20the%20scaling/rotation,%20(3)%20translate%20the%20object%20back%20to%20where%20it%20was.%20If%20you%20just%20scale%20an%20object%20where%20it%20is,%20its%20distance%20from%20the%20origin%20will%20also%20be%20scaled%20up.%3C/dd%3E%0A%3C/dl%3E%0A" text="Click for interactive: 3D with multiple matrices and vectors"}
+{button-link link="https://archive.csfieldguide.org.nz/1.9.9/_static/widgets/CG/CG-mini-editor/main%20%28cutdown%29.html?info=%0AYou%20can%20experiment%20with%20moving%20the%20teapot%20around%20in%20space,%20changing%20its%20size,%20and%20angle.%3Cdl%20class=%22docutils%22%3E%0A%3Cdt%3EThink%20about%20the%20order%20in%20which%20you%20need%20to%20combine%20the%20transforms%20to%20get%20a%20particular%20image%20that%20you%20want.%3C/dt%3E%0A%3Cdd%3EFor%20example,%20if%20you%20translate%20an%20image%20and%20then%20scale%20it,%20you%E2%80%99ll%20get%20a%20different%20effect%20to%20scaling%20it%20then%20translating%20it.%0AIf%20you%20want%20to%20rotate%20or%20scale%20around%20a%20particular%20point,%20you%20can%20do%20this%20in%20three%20steps%20%28as%20with%20the%202D%20case%20above%29:%20(1)%20translate%20the%20object%20so%20that%20the%20point%20you%20want%20to%20scale%20or%20rotate%20around%20is%20the%20origin%20%28where%20the%20x,%20y%20and%20z%20axes%20meet%29,%20%282%29%20do%20the%20scaling/rotation,%20%283%29%20translate%20the%20object%20back%20to%20where%20it%20was.%20If%20you%20just%20scale%20an%20object%20where%20it%20is,%20its%20distance%20from%20the%20origin%20will%20also%20be%20scaled%20up.%3C/dd%3E%0A%3C/dl%3E%0A" text="Click for interactive: 3D with multiple matrices and vectors"}
 
 In the above examples, when you have several matrices being applied to every point in the image, a lot of time can be saved by converting the series of matrices and transforms to just one formula that does all of the transforms in one go.
 The following interactive can do those calculations for you.
 
 For example, in the following interactive, type in the matrix for doubling the size of an object (put the number 2 instead of 1 on the main diagonal values), then add another matrix that triples the size of the image (3 on the main diagonal).
 The interactive shows a matrix on the right that combines the two – does it look right?
 
-{button-link link="http://www.csfieldguide.org.nz/releases/1.9.9/_static/widgets/CG/CG-matrix-simplifier/CG-matrix-simplifier.html?info=Multiple%20transforms" text="Click for interactive: matrix simplifier"}
+{button-link link="https://archive.csfieldguide.org.nz/1.9.9/_static/widgets/CG/CG-matrix-simplifier/CG-matrix-simplifier.html?info=Multiple%20transforms" text="Click for interactive: matrix simplifier"}
 
 {panel type="teacher-note"}
 
@@ -735,11 +735,11 @@ and use the "simplifier" interactive to combine all the matrices into one operat
 
 The scene-creation interactive can be run from here:
 
-{button-link link="http://www.csfieldguide.org.nz/releases/1.9.9/_static/widgets/CG/CG-mini-editor/main.html?info=Multiple%20transforms" text="Click for interactive: scene creation"}
+{button-link link="https://archive.csfieldguide.org.nz/1.9.9/_static/widgets/CG/CG-mini-editor/main.html?info=Multiple%20transforms" text="Click for interactive: scene creation"}
 
 To generate combined transformations, you can use the following transform simplifier interactive:
 
-{button-link link="http://www.csfieldguide.org.nz/releases/1.9.9/_static/widgets/CG/CG-matrix-simplifier/CG-matrix-simplifier.html?info=Multiple%20transforms" text="Click for interactive: matrix simplifier"}
+{button-link link="https://archive.csfieldguide.org.nz/1.9.9/_static/widgets/CG/CG-matrix-simplifier/CG-matrix-simplifier.html?info=Multiple%20transforms" text="Click for interactive: matrix simplifier"}
 
 Because you can't save your work in the interactives, keep notes and screen shots as you go along.
 These will be useful for your report, and also can be used if you need to start over again.

csfieldguide/chapters/content/en/computer-vision/sections/face-recognition.md

@@ -1,17 +1,18 @@
 # Face recognition
 
 Recognising faces has become a widely used computer vision application.
-These days photo album systems like Picasa and Facebook can try to recognise who is in a photo using face recognition.
-For example, the following photos were recognised in Picasa as being the same person, so to label the photos with people's names you only need to click one button rather than type each one in.
+These days photo album systems like Google Photos and Facebook can try to recognise who is in a photo using face recognition.
+The following photos were recognised in an application as being the same person, so to label the photos with people's names you only need to click one button rather than type each one in.
 
-{image file-path="img/chapters/face-recognition-software-screenshot.jpg" alt="Google's Picasa recognises these photos as being the same person"}
+{image file-path="img/chapters/face-recognition-software-screenshot.jpg" alt="An application recognises these photos as being the same person"}
 
 There are lots of other applications.
 Security systems such as customs at country borders use face recognition to identify people and match them with their passport.
 It can also be useful for privacy — Google Maps streetview identifies faces and blurs them.
 Digital cameras can find faces in a scene and use them to adjust the focus and lighting.
 
 There is some information about [how facial recognition works](http://electronics.howstuffworks.com/gadgets/high-tech-gadgets/facial-recognition.htm) that you can read up as background, and some more information at [i-programmer.info](http://www.i-programmer.info/babbages-bag/1091-face-recognition.html).
+If you're interested, there is also a Vox video on [how Snapchat filters work](https://www.youtube.com/watch?v=Pc2aJxnmzh0) that mentions facial recognition algorithms.
 
 There are some relevant [articles on the cs4fn website](http://www.cs4fn.org/vision/) that also provide some general material on computer vision.
 
@@ -34,7 +35,7 @@ First let's manually try some methods for recognising whether two photographs sh
   Would these features be a reliable way to recognise two images as being the same person?
 - Are there other features you could measure that might improve the accuracy?
 
-You can evaluate the effectiveness of facial recognition in free software such as Google’s Picasa or the Facebook photo tagging system, but uploading photos of a variety of people and seeing if it recognises photos of the same person.
+You can evaluate the effectiveness of facial recognition in free software such as Google Photos or the Facebook photo tagging system, by uploading photos of a variety of people and seeing if it recognises photos of the same person.
 Are there any false negatives or positives?
 How much can you change your face when the photo is being taken to not have it match your face in the system?
 Does it recognise a person as being the same in photos taken several years apart?

csfieldguide/chapters/content/en/computer-vision/sections/further-reading.md

@@ -1,4 +1,4 @@
 # Further reading
 
-- [https://en.wikipedia.org/wiki/Computer_vision](https://en.wikipedia.org/wiki/Computer_vision)
-- [https://en.wikipedia.org/wiki/Mri](https://en.wikipedia.org/wiki/Mri)
+- [Computer vision on Wikipedia](https://en.wikipedia.org/wiki/Computer_vision)
+- [Magnetic resonance imaging (MRI) on Wikipedia](https://en.wikipedia.org/wiki/Mri)

csfieldguide/chapters/content/en/data-representation/sections/images-and-colours.md

@@ -1,7 +1,5 @@
 # Images and Colours
 
-## How do computers display colours?
-
 In school or art class you may have mixed different colours of paint or dye together in order to make new colours.
 In painting it's common to use red, yellow and blue as three "primary" colours that can be mixed to produce lots more colours.
 Mixing red and blue give purple, red and yellow give orange, and so on.

csfieldguide/chapters/content/en/human-computer-interaction/sections/interface-usability.md

@@ -105,10 +105,16 @@ It has English captions, but the most interesting part is what is happening in t
 
 Another important length of time to bear in mind is our *short term memory* time, which is usually a matter of seconds.
 To remember something for longer, the user needs to rehearse it (repeat it over) or make a note of the information, such as writing it down.
+Try the interactive below and see how many items you can remember without using these techniques!
+
+{interactive slug="picture-memory" type="whole-page"}
+
 If a system takes some time to respond (say, 10 seconds) then chances are the user may have forgotten some detail of what they were going to do with the system.
 For example, if you have a phone number to type in that someone has just told you, and it takes 12 seconds before you can type it, you may forget the number, whereas if you can access the interface within a couple of seconds, you can probably enter the number without much effort.
 For this reason, any part of a system that takes more than about 10 seconds to respond forces the user to rehearse or write down key information, which is more tiring.
 
+{interactive slug="number-memory" type="in-page"}
+
 There's some more information about "time limits" for interfaces in [this article by Jakob Nielsen](http://www.nngroup.com/articles/response-times-3-important-limits/).
 
 ## Human spatial memory

csfieldguide/chapters/content/en/programming-languages/sections/further-reading.md

@@ -1,7 +1,5 @@
 # Further reading
 
-## Useful links
-
 - The [TeachICT lesson on programming languages](http://www.teach-ict.com/gcse_computing/ocr/216_programming/programming_languages/miniweb/index.php) covers many of the topics in this chapter
 - CS Online has a [quick overview of this topic](http://courses.cs.vt.edu/~csonline/ProgrammingLanguages/Lessons/Introduction/index.html)
 - Wikipedia entries on [programming language](https://en.wikipedia.org/wiki/Programming_language), [high level language](https://en.wikipedia.org/wiki/High-level_programming_language), and [low level language](https://en.wikipedia.org/wiki/Low-level_programming_language)

csfieldguide/chapters/content/en/software-engineering/sections/further-reading.md

@@ -1,7 +1,5 @@
 # Further reading
 
-## Useful links
-
 - [Wikipedia – Software engineering](https://en.wikipedia.org/wiki/Software_engineering)
 - [CS4FN – Software engineering](http://www.cs4fn.org/fundamentals/softwareeng.php)
 - [Teach ICT – Systems Life Cycle](http://www.teach-ict.com/as_a2_ict_new/ocr/A2_G063/331_systems_cycle/slc_stages/home_slc.html)

csfieldguide/config/__init__.py

@@ -1,3 +1,3 @@
 """Module for Django system configuration."""
 
-__version__ = "3.0.1"
+__version__ = "3.0.3"

csfieldguide/interactives/content/en/interactives.yaml

@@ -100,6 +100,8 @@ no-help:
   name: No Help
 number-generator:
   name: Number Generator
+number-memory:
+  name: Number Memory
 off-by-one:
   name: Off By One
 packet-attack:
@@ -112,6 +114,8 @@ payment-interface:
   name: Payment Interface
 persona-carousel:
   name: Persona Slideshow
+picture-memory:
+ name: Picture Memory
 pixel-grid:
   name: Pixel Grid
 pixel-viewer:

csfieldguide/interactives/content/structure/interactives.yaml

@@ -231,6 +231,10 @@ number-generator:
   languages:
     en: interactives/number-generator.html
   is_interactive: true
+number-memory:
+  languages:
+    en: interactives/number-memory.html
+  is_interactive: true
 off-by-one:
   languages:
     en: interactives/off-by-one.html
@@ -259,6 +263,10 @@ persona-carousel:
   languages:
     en: interactives/persona-carousel.html
   is_interactive: false
+picture-memory:
+  languages:
+    en: interactives/picture-memory.html
+  is_interactive: true
 pixel-grid:
   languages:
     en: interactives/pixel-grid.html

csfieldguide/package.json

@@ -4,15 +4,15 @@
   "main": "gulpfile.js",
   "private": true,
   "dependencies": {
-    "bootstrap": "4.1.3",
-    "details-element-polyfill": "2.0.4",
+    "bootstrap": "4.3.1",
+    "details-element-polyfill": "2.3.1",
     "featherlight": "1.7.13",
-    "popper.js": "1.14.4",
-    "jquery": "3.3.1",
+    "popper.js": "1.15.0",
+    "jquery": "3.4.1",
     "multiple-select": "1.2.1",
     "sticky-state": "2.4.1",
-    "iframe-resizer": "3.6.3",
-    "gumshoejs": "5.1.1",
+    "iframe-resizer": "4.1.1",
+    "gumshoejs": "5.1.2",
     "csfg-module-fsa": "file:./static/js/modules/fsa/",
     "csfg-interactive-algorithm-timer": "file:./static/interactives/algorithm-timer/",
     "csfg-interactive-big-number-calculator": "file:./static/interactives/big-number-calculator/",

csfieldguide/static/interactives/number-memory/README.md

@@ -0,0 +1,6 @@
+# Number Memory Interactive
+
+**Author:** Alasdair Smith
+
+This interactive demonstrates the limitations of short term memory by getting the user to remember a number.
+If the user gets it right, they then need to remember a larger number during a period of distractions.