CCW

  • File Management

    Many people think that because young people grow up using phones, tablets, and computers, they must be “good with technology.” But studies are showing that digital literacy and basic computer skills are actually declining in younger generations like Gen Z and Gen Alpha. This is because the apps we use hide how these things really work behind the scenes.

    Managing folders, saving files properly, or using different programs are key skills skills that schools and jobs still rely on every day. Whether you’re writing a report, making a slideshow, editing a video, or just emailing someone a file. Good file management saves time, reduces stress, and shows you know what you’re doing.

    Here’s a basic task that gives you the chance to practise some real-world computer skills:

    In Documents, create a new folder. Name it “File Task”

    Inside the folder, create 3 more folders. Name these folders:

    • folder 1
    • folder 2
    • folder 3

    Leave the first folder empty.

    Save the image to the right into folder 2. Rename the image file “image.jpg“

    In folder 3, create and save a Word document. Name the document “word“

    When you are finished, compress your File Task folder containing the other 3 folders into a ZIP folder and submit on compass.

    By completing this task, you have practised and developed the following essential digital skills:

    File and Folder Management

    • Creating folders and subfolders
    • Naming and renaming folders and files clearly
    • Navigating through folders to find and organise files

    Basic Computer Operations

    • Saving files to specific locations
    • Using right-click or menus to rename and move files
    • Prepare a group of files into a single ZIP folder for file handling, such as uploading to to an online platform.

    These are basic digital skills you’ll use throughout your study and employment, especially when working with assignments, projects, or creative files.

    Need Help? Here’s How to do it on a Mac

    🗂 How to Create a New Folder

    1. Open Finder (the blue-and-white smiley face on your Dock).
    2. In the sidebar on the left, click on Documents.
    3. Right-click in an empty space.
    4. Click New Folder.
    5. A new folder will appear called “untitled folder” — rename it to something like File Task

    To create 3 more folders inside the folder double-click your new folder to open it and repeat the process.

    🖼 How to Save an Image to a Specific location and Rename It

    1. Right-click the image to the right.
    2. Choose Save Image As…
    3. Choose your folder 2 from the list of folders.
    4. Save the file.
    5. Go to folder 2 in Finder.
    6. Right-click the image file and select Rename.
    7. Type “image.jpg” and press Return.

    📄 How to Make a Word Document and Save It

    1. Open Microsoft Word from the Dock or by pressing cmd + Space and tying “word“.
    2. Click File > New Document (just make a blank one – you don’t need to type anything).

    3. Click File > Save.

    4. Use the save window to choose folder 3 from your folders. You may need to select “On My Mac“in the bottom left corner of the window to save locally.

    5. Name the file “word” and press save.

    6. Make sure the extension ends in .docx

    📦 How to Compress a ZIP Folder

    1. Go back to your Documents folder in Finder and find the File Task folder you made (the one with folder 1, folder 2, and folder 3 inside it).
    2. Right-click that main folder.
    3. Select Compress from the menu.
    4. You’ll see a new file appear called File Task.zip: That’s the one to upload.

  • Cryptography Puzzle Creation

    Aim

    This task aims to assess your understanding of cryptography concepts, and encryption techniques, creativity and problem-solving skills, and collaboration skills with your partner.

    Your task is to create a cryptography puzzle that consists of at least 3 layers of security. Your puzzle should use a range of cryptography techniques including one of the cipher methods we learned in class.

    How it will be Assessed

    Your puzzle will be graded according to the following criteria:

    • Collaboration & contribution skills.
    • Creativity and complexity.
    • Understanding & implementation of Encryption techniques.
    • Clarity of instructions & hints
    • Presentation & peer engagement to the testing of others puzzles.

    The rubric for this task can be found here:

    Cryptography-Puzzle-Task-RubricDownload

    Instructions

    Follow the steps below carefully to complete the task.

    Step 1: Research, inspiration and ideas.

    Conduct research based on encryption methods we have covered in class, as well as additional ideas you may be able to use to help create your puzzle.

    Record a list of your ideas on a Word Document.

    Step 2: Make your puzzle.

    Begin the process of creating your puzzle. Establish what will happen in each layer of security and encryption.

    (Feel free to collect resources and materials or make your own in this stage.)

    Begin making your clues, hints or steps required to complete your puzzle. Ensure these are presented in a way for someone to follow.

    Step 3: Testing your puzzle.

    Test your own puzzle to ensure it works. If there are any changes or amendments to be completed, ensure they are corrected before final submission and presentation.

    Step 4: Presenting your puzzle.

    Discuss the best way to present your puzzle to the group with me and gather any resources needed to do so.

    You will have half a lesson to present your puzzle to the group as well as take part in the completion of other groups puzzles.

    Example Puzzle Ideas:

    Use the ideas below to help your get started:

    Substitution Cipher Puzzle:

    Encrypt a short message using a simple substitution cipher (e.g., A=1, B=2) and provide a key for reference.

    Include hints like “The alphabet has been shifted by 3 positions.”

    Transposition Cipher Puzzle:

    Rearrange the letters of a sentence using a transposition cipher and provide a clue on the rearrangement pattern.

    Offer a hint like “Read every third letter in reverse.”

    Caesar Cipher Puzzle:

    Encrypt a famous quote using a Caesar cipher with a specific shift value.

    Provide a hint that indicates the shift value, but not the plaintext.

    Vigenère Cipher Puzzle:

    Develop a Vigenère cipher puzzle and provide a keyword.

    Challenge your peers to decipher the message with the given keyword.

    Hints and Tips:

    • Think outside the box!
    • Incorporate basic puzzles like dot-to-dots, crossword puzzles or find-a-words into your puzzle to add layers of complexity.
    • Revisit past grok modules, How do they create puzzles?

  • One Time Pad

    What is a One Time Pad?

    A one time pad, also known as a “Vernam cipher” or “perfect cipher,” is an encryption technique that provides absolute security when used correctly. It works by using a random key that is as long as the message itself. This key is used only once, hence the name “one-time pad.”

    Think to yourself…
    What benefits would having the key as long as the message have?
    What limitations could this pose?

    Key characteristics?

    Perfect Security: When used with a truly random and secret key, a one-time pad provides perfect security. This means that even with unlimited computational power, an attacker cannot determine the original message. This is because the key is as long as the message, making it statistically impossible to crack.

    Key Length: The key must be as long as the message, which can be a limitation for practical use. Sharing long, random keys securely can be challenging.

    Key Reusability: The key should never be reused for another message. Reusing a one-time pad key weakens the security because it allows patterns to emerge that attackers might exploit.

    Key Security: Protecting the secrecy and integrity of the key is crucial. If the key is compromised, all security is lost.

    Limited Practical Use: One-time pads are rarely used in modern communication due to their limitations, especially in securely distributing and managing long, random keys. Instead, modern encryption methods like public-key cryptography and symmetric-key algorithms are more practical for most purposes.

    How does it work?

    Key Generation: To encrypt a message using a one-time pad, you need a random key that is as long as the message. This key can be generated using truly random processes, such as a hardware random number generator, to ensure that it’s unpredictable and unique for each use.

    Key Distribution: The key must be securely shared between the sender and the receiver. This is a significant challenge because if the key is compromised or intercepted, the security of the system is lost. In practice, this is one of the main limitations of one-time pads.

    Encryption: To encrypt a message, the sender combines each character of the plaintext (the message) with the corresponding character in the key using modular addition. This process creates the ciphertext. The key is never reused for another message.

    Decryption: To decrypt the message, the receiver uses the same one-time pad key and subtracts it from the ciphertext using modular subtraction to recover the original plaintext.

    Have a go at a Vernam Cipher here.

    Is it effective?

    A one-time pad is a theoretically perfect encryption method that relies on using a random and secret key that is as long as the message. While it provides unbreakable security, it has practical limitations that make it less suitable for most everyday encryption needs.

    Parting Question

    If I wanted to set up a one-time-pad for use to swap secret messages with someone, how would I do this?

  • Pathfinder Panel

    Sometimes we need more complicated shapes than circles, squares and polygons. The Pathfinder panel allows us to create new shapes by adding and subtracting them together.

    To use the Pathfinder Panel we need to select both objects by using the selection while holding shift.

    The pathfinder tool has the following functions:

    #1 Add:
    Combines the selected objects together

    #2 Subtract:
    Slices the top object out of the bottom

    #3 Intersect:
    Creates a new object from the overlapping area of both objects.

    #4 Exclude Overlap:
    Cuts out the overlapping area of both objects.

    Creating new shapes using the Pathfinder panel

    Below we will learn how to make a simple heart shape with the Pathfinder Panel.

    To start, create a square and two circles. Use the Transform panel on the right to ensure all three objects have the same height and width.

    Drag the circles over two edges of the square. Use the guides to help you line everything up perfectly.

    Drag select all 3 objects.

    Hover your mouse just outside of one of the selection box’s corners to make the rotation tool visible. Rotate your heart so it is upright.

    Press add in the Pathfinder Panel.

    Your heart should now be complete. Try to think of other ways you can use the Pathfinder panel to create new shapes.

  • Polish

    Only follow this tutorial if:

    • Your app already has at least 5 screens
    • All of your screens have transitions between them
    • Your app is able to perform it’s core function
    • Your app can complete a full loop

    Please focus on your apps minimum viable product first

    After we have created our apps basic functionality we can add and change elements to refine it. This polish can be the difference between our app appearing to be created by an amateur or professional.

    Visual Constancy

    Do these two characters look like they belong together? Probably not! That’s because they have very different art styles, which can make your work look messy and confusing.

    When styles don’t match, it’s harder for people to understand what’s going on, and it doesn’t look as good. Try to keep things looking similar. For example, if you’re using photos, keep using photos, or if you start with 3D characters, don’t mix in hand-drawn ones.

    Good design looks better and is easier to use when things match.

    In the first example, the words are different sizes, the fonts don’t match, and the buttons are all shaped differently. This makes it look messy and harder to follow. In the second example, everything is the same size, the fonts match, and the buttons all look the same. When things are consistent like this, the design looks neater and is easier to understand.

    Colours

    In the example above, there are too many bright colours fighting for attention, which makes it hard to know where to look and can even give people a headache.

    When you use fewer colours that work well together, your design feels calm, organized, and more professional. It also makes important things stand out without overwhelming the viewer. Remember that good design helps people find information quickly, and a limited colour palette makes that easier.

    Animation

    A splash screen is the fist screen users see before using an app, even before the home screen. This type of screen is used to capture the users attention and to get them excited to use the app.

    If we want to add a little bit of style to our app we can include some basic animation.

    Bellow, will I show you how to make a simple splash screen

    Here we are going to add a simple rotation animation to the doughnut. This kind of animation works best with round elements that don’t have parts sticking out. This object could be a wheel, ripples in a cup of coffee, or in this case, a doughnut.

    Start by designing a splash screen and making a copy of it by grabbing the artboard title (This is usually called iPhone 14 Pro Max”) and dragging off a new one while holding alt/option.

    On the second screen while in the Design menu, change the rotation of our round element to 359 degrees. While it may not appear a lot has changed, this is an important step in making our object spin.

    Head to the Prototype menu.

    In the Prototype menu, select the title of the first splash screen and drag a wire over to the second screen.

    After connecting the wire head over to the Interaction panel on the right.

    Change the trigger to time with a delay of zero seconds, this makes the animation begin right away.

    in the Action panel, change the animation type to “Auto-Animate”, the Easing to “None”, and the Duration to “2 seconds”. This will make the object rotate at an even speed. You might want to experiment with these settings later.

    Now select the title of the second splash screen artboard and drag a wire over to the first.

    Head back to the Interaction and Action panels.

    Here, change the animation type to “transition”. While you are here, ensure there is no delay and animation is set to “None”.

    You can text if you have successfully created your splash screen animation by pressing play in the top right corner. If successful, the animation should loop forever.

    Finally, we need to connect the splash screen to the home screen. Be sure to connect the buttons on both splash screens as show above to ensure it is always accessible.

    This is just one of many ways we can use animation to add a premium feeling to our app. Experiment with the skills you have learnt to see if you can create new types of animations.

  • Creating Transitions

    By now you should be ready to create additional screens for your app. These screens are called artboards.

    The best way to do this is by duplicating the existing art board. This ensures the new artboard is the same size, this is important because phone screens cannot change size.

    Duplicating Artboards

    To duplicate the artboard, we need to use the selection tool to select the title of the artboard (This is probably called something like “iPhone 14 Pro Max”). After selecting, we can duplicate the window two ways; by pressing cmd+d or by dragging the artboard by the title while holding alt/option.

    After duplicating the artboard we can delete the unneeded elements and continue working.

    Creating Buttons

    Before we create our transitions we need a button to press to activate it. These buttons can be a shape, image, text or be any type of object.

    If our button is made of multiple objects we can group them together using the select tool to select multiple objects while holding shift. We can then right-click the selection and choose group, or press cmd+g. The group of objects selected will now be treated as one object.

    The Prototype Menu

    Up until this point we have been using the Design menu to define the visual aesthetic of our app, we now need to move to the Protoype menu in the top left corner to create our transitions.

    To create a transition, use the select tool to select your button. You will notice a blue arrow on the right side of the object.

    You can now drag this arrow to the artboard you want your button to link to and unclick. After releasing, you will notice a connection between the button and artboard – these connections are called wires.

    You can now test your buttons by clicking the play button in the top right corner of the screen. You may need to click the artboard that has your button in it first to start in the right place.

    Types of Transitions

    With your now linked button selected you might notice the action menu on the right side of the screen. Here you can change the type of transition that will happen when the button is pressed.

    Maybe you want everything to move into place with Auto-Animate or for the new screen to fade in over the old one with Overlay.

    Experiment with the different types to see what effects can be done!

  • Colours and Appearance

    Now that we have gotten a general idea of our layout with our wireframe, it is time to add some visuals to our app.

    Colour Palette

    nearly every major app has a distinct colour palette: Youtube is red, white, and black while Snapchat is yellow, blue and white. to strengthen the appearance of our app we can also choose a colour palette for our apps.

    As a quick way to generate a colour palette I recommend using Coolors.co. Here we can generate colour palettes by pressing spacebar until we get one we like.

    Once we are happy with the colour palette, we can copy the individual colours by clicking the codes at the bottom and using cmd+c. This is called a Hexcode which turns the exact colour into numbers and letters.

    We can now make an object in our Adobe Xd document this colour by selecting it, clicking the colour block next to “fill” or “border” and pressing cmd+v.

    Inserting Images

    Rather than creating every image in our app from scratch, we can use online images from places such as Google Images. When we find and image we like we can copy the image by right-clicking and selecting Copy Image.

    We can then insert the image into Adobe Xd with cmd+v.

    We can also use a shape to mask our image by right-clicking and selecting Paste Appearance.

    We can change the appearance of other elements in our app using the following panels:

    Appearance Panel

    Here you can change the fill colour, border colour and roundness of object corners.

    Transform Panel

    Allows the height, width, angle and position of the objects to be changed.

    Text Panel

    Here you can modify font type, size, text alignment, and other text options.

  • The Fix

    Sometimes, due to the implementation of new features we need to go back and update our programming due to incompatibility of these functions. The collectable pick-up function we created in an earlier lesson is one of these instances; respawning makes the player character no longer able to pick up collectable items.

    This happens when the player character despawns; the game doesn’t move the existing character back to the respawn point—it creates a clone of the character. As a result, any data stored on the original character, such as the “keys collected” counter, is lost and no longer tracked by the newly spawned character.

    To fix this, we need to move the Keys Collected counter somewhere else. Drag select, cut(cmd+X) and Paste(cmd+V) this node chain from BP_ThirdPersonCharacter to BP_ThirdPersonGameMode. You will need to recreate the Variables and Event Dispatcher on the left in BP_ThirdPersonGameMode.

    We will now need to Update BP_[Item]Collectable as above. Note that the Key Pick Up node needs to be recreated now referencing BP_ThirdPersonGameMode.

    BP_LockedDoor will also need to be updated with the red highlighted nodes. Please note that you will need to recreate the Keys Collected variable as the existing one is attached to BP_ThirdPersonCharacter, not BP_ThirdPersonGameMode.

    Finally we need to update the highlighted red nodes in this section of the WBP_HUD widget. As before, please replace the nodes even if they have the same name, as they are referencing BP_ThirdPersonCharacter, not BP_ThirdPersonGameMode. Compile and test.

    Clean-up

    Return to BP_ThirdPersonCharacter, go to Edit > Delete Unused Variables. This will remove any now unused variables.


  • Cipher Refresh

    Ceasar Cipher Refresh

    Watch the video below to recap how a simple Ceasar Cipher works. Practice manually ciphering messages with a partner to reinforce these ideas.

    Vignére Cipher Refresh

    Watch the video below to recap how to Encrypt and Decrypt using a Vignére Cipher. Practice manually ciphering messages with a partner to reinforce these ideas.

    Encryption and Decryption Practice

    Encryption WorksheetDownload

    Step1:
    Fill out the sheet above. Encrypt your answers with a Caesar cipher. Swap with a partner and have them decrypt your answers.

    Take your encrypted answers and fill out the cipher text

    (For an Extra challenge, don’t provide the key to see if they can crack each other messages first.) 

    Step2:
    Fill the same sheet out again, but this time encrypt your answers with a Vignére cipher.

    State the key and swap with a partner to decrypt your answers.

  • Winning and losing

    Last lesson we created a “lose” state for when our player character is destroyed, which returns them safely to the game starting point. In this tutorial, we will add methods for the player to “win” or “lose”.

    Losing

    Sometimes our characters meet an unfortunate fate. Maybe they have stepped onto spikes or lava, immediately causing their doom. Dangerous terrain like this is called a “killzone”

    As we have set up our player character to immediately respawn in a safe location whenever they are destroyed.

    Go to the Content Drawer and go to Add > Blueprint Class > Actor. Name this new Blueprint “BP_Killzone”, double click to enter. Once in the blueprint add a Box Collision in the components panel on the left. Head to the Event Graph.

    From “Event ActorBeginOverlap” Cast to BP_ThirdPersonCharacter.

    Now from “As BP_Third Person Character” Drag and release to select “Destroy Actor”

    Compile and test. Your character should trigger the respawn function we created last lesson when coming into contact with the killzone. Feel free to return to the viewport and add a static mesh to the killzone, such as spikes or lava.

    While the killzone has it’s core functionality, it doesn’t really have any impact. Let’s freeze the character for a moment to signify the impact.

    Right click both the links to the Destroy actor node and select “Break This Link”.

    From “As BP Third Person Character” drag and release twice to select “Get Character Movement” and “Get Mesh”. These are the assets we will be freezing.

    From one of these new nodes, drag and release to select “Deactivate”. Connect both of these nodes to the target. Connect the new Deactivate node to the Cast To BP_ThirdPersonCharacter node.

    From the Deactivate node drag and release to select “Retriggerable Node”.

    Reconnect the Destroy Actor node to the end of the chain and to “As BP Third Person Character”. Your event Graph should look like this. Now when the player character hits the killzone there will be a noticeable delay before being returned to the respawn point.

    This is a good start, but we can improve the impact by adding a sound effect. Right-click the top output of the Event ActorBeginOverlap node and select “Break This Link”. Drag and release from this output to select “Play Sound 2D”, which will create a sound effect centered on the player. Connect the output of this node to the input of “Cast To BP_ThirdPersonCharacter”.

    In the Sound input of the new node select your sound effect. You may want to find a sound online and import it to the game by going to Content Drawer > Add > Import to /Game…

    We can add additional effects to increase the impact of our player character taking damage, such as shaking the screen, flashing red or black over the viewport, or adding particle effects such as sparks or explosions. Do some independent research to come up with your own to find your own way of communicating losing to the player.

    Winning

    To start, we need to make a victory screen to communicate to the player that they have won the game. Got to the Content Drawer and select Add > User Interface> Widget Blueprint. Name this new Blueprint “WBP_Victory”. Double Click to enter the Widget Designer.

    In the top-left Palette Panel, search and drag “Canvas Panel” into the designer.

    Spend a little bit of time designing a victory message to the player. You can add images or text the game way you did in Communicating Collectables.

    Be sure to Anchor this and all future objects to center in the right Details Panel. This ensures the elements will always aligned to the center of the screen, regardless of screen size and aspect ratio.

    Back in the Palette Panel, drag two buttons into the canvas. Name these buttons “Replay” and “Quit”.

    Resize and arrange these buttons however your feel.

    From the left Palette Panel, Drag a text box into each button. In the right Details Panel change the names of these text boxes to “RetryText” and “QuitText”. Change the text of these boxes to their respective purposes under Content > Text.

    Now let’s add some controls to our buttons. Select the Retry button and scroll down to the bottom of the right Details Panel. Under “Events” select “On Clicked”, this will take you to the Event Graph.

    From the On Clicked Event, Drag and Release to type and select “Set Show Mouse Cursor” (you will need to uncheck “Context Sensitive” to find this) and ensure “Show Mouse Cursor” is unticked. Drag and release from the target input and select “Get Player Controller”

    From the Set node output Drag and Release to select “Execute Console Command”. Fill in the Command text box with “restartlevel”. Your Event Graph should look like this.

    Return to the Widget Designer and select the Quit button > On Clicked Event.

    From “On Clicked (Quit)” drag and release to select “Quit Game”. Click compile.

    We have now completed our victory screen widget. We now need to create a Goalzone to trigger this screen.

    Return to the Content Drawer and Click Add > Blueprint Class > Actor. Name this blueprint “BP_GoalZone” and double-click to enter.

    As we did for BP_Killzone add a Box Collision. Go to the Event Graph.

    From “Event ActorBeginOverlap” Cast to BP_ThirdPersonCharacter.

    From the new node, drag and release to select “Create Widget”. Set the Widget Class to “WBP_Victory”. Drag and release from the Return Value to select “Add to Viewport”.

    From the Add to Viewport node, drag and release to select “Set Show Mouse Cursor” (as before, you will need to uncheck “Context Sensitive” to find this) and ensure “Show Mouse Cursor” is ticked. Drag and release from the Target input to select “Get Player Controller”.

    Finally, Drag from the Set node to select “Set Game Paused”. ensure “Paused” is ticked. Your event Graph should look like this.

    Compile and test. Your victory screen should now appear when the player character collides with it.

    Think of other ways you could make the victory screen more exciting. Maybe you could add sounds or visual other effects to improve the players sense of achievement. This is your chance to be creative.