Digital Solutions

Unit 1: Creating with code

Topic 1: Understanding digital problems
Topic 2: User experiences and interfaces
Topic 3: Algorithms and programming techniques
Topic 4: Programmed solution
This TLAPS is under constant reviewUnit 1 TLAPS | pdf | docx | rtf

Coursework by week:
Pre-requesite: Python (via console) not including the OOP stuff (thank QCAA)

Open web app challenges

1 Installation
first web app
how to debug
basic output
importing html file (the non-Flask way)
web app challenges
2 template renderer
dynamic html
render_template_string (quick way to test Jinja2)
web app challenges
3jinja2 iteration
static file linking
list recap
dictionary recap
tuple recap
web app challenges
4URL routing
advanced jinja2 logic
HTML elements recap
CSS links CSS divisions recap
web app challenges
5GET or POST input
client side validation
SESSION variables
web app challenges
6 file uploads
more on files
CSS Grid recap
responsive layout recap
FILES recap
web app challenges
7 algorithms
GUI design
other doc skills
web app challenges
8-10Start FA1 Project - digital solution below.

Template provided:

Week 10 first checkpoint, submit:
  • exploration of solutions
  • identification of algorithms
  • user interface sketches
11-13 Week 13 (T2 W3) draft due
Redirection recap
14-15 Week 15 (T2 W5) final submission  
This FA1 ISMG is subject to change (QCAA are yet to publish a set of criteria or ISMGs specific to Unit 1):

FA1 Project - digital solution | pdf | docx | rtf, or individually:

networkdrive.ico | networkdrive.png | networkdrive.html | networkdrive.css

template source code:

<!DOCTYPE html>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Network Drive</title>
  <link rel="stylesheet" type="text/css" href="networkdrive.css">
  <link href=' Code Pro' rel='stylesheet'>
  <link rel="icon" href="networkdrive.ico">
<div id="layout">
  <div id="top"><img src="networkdrive.png" id="logo">Network Drive</div>
  <div id="tab">
    <div class="navinline">
      <a href="#">inline link 1</a> 
      <a href="#">inline link 2</a>
  <div id="left">
    <div class="navblock">
      <a href="#">block link 1</a>  
      <a href="#">block link 2</a>
  <div id="middle">
    main content
    <form method="GET" action="networkdrive.html">
        <tr><td><input type="text" name="A" placeholder="input text"/></td>
            <td> </td></tr>
        <tr><td><textarea name="B" placeholder="textarea text"></textarea></td>
            <td> </td></tr>
        <tr><td><select name="C">
          <option value="1">option A</option>
          <option value="2">option B</option>
        </select></td><td> </td></tr>
        <tr><td><input type="checkbox" name="D" id="uncheck_me" value="1" checked></td>
            <td><label for="uncheck_me">check me</label></td></tr>
        <tr><td><input type="radio" name="E" id="radio_me" value="1" /></td>
            <td><label for="radio_me">radio me</label></td></tr>
        <tr><td><input type="radio" name="E" id="or_radio_me" value="2" /></td>
            <td><label for="or_radio_me">or radio me</label></td></tr>
        <tr><td colspan="2"><input type="submit" value="submit"/></td></tr>
  <div id="right">right column</div>
  <div id="bottom">© your student name</div>

/* ------------- */
/* ------------- */
input, textarea, select {
    padding: 5px; 
    border: 2px solid #CCBCA4; 
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: white;

input:focus, textarea:focus, select:focus {
    border-color: slateblue;
    outline: none;

/* ----------- */
/*  MAIN FONT  */
/* ----------- */

body {
  font-size: calc(16px + 1vw);
  line-height: calc(1.1em + 0.5vw);
  font-family: 'Source Code Pro';
  color: #2a2b2c;
  margin: 0;
  background-color: #524676;

/* ----------- */
/*    LOGO     */
/* ----------- */

    width: calc(16px + 1vw);
    height: auto;
    padding-right: 20px;
    float: left;

/* ----------- */
/*    TABLE    */
/* ----------- */

table {
    border-collapse: collapse;

table td, table th {
    border: 1px solid #2a2b2c;
    padding: 3px;

table th {
    background-color: #cdc59d;

/* ----------- */
/*    LINKS    */
/* ----------- */

.navblock a{
   text-decoration: none;
   color: #2a2b2c;
   display: block;   

.navblock a:hover{
   color: #1B1BB1;

.navinline a{
   text-decoration: none;
   color: #2a2b2c;
   display: inline; 

.navinline a:hover{
   color: #1B1BB1;

/* ----------- */
/* ----------- */

    display: grid;
        'top top top'
        'tab tab tab'
        'left middle right'
        'bottom bottom bottom';
    width: 90vw; /* 90% of viewport width */
    margin: 0 auto; /* centres the element */

/* stack containers when on small screen: */
@media screen and (max-width: 640px) {
        display: grid;

    background-color: #524676;
    grid-area: top;
    color: #B8AFD2;
    padding: 5px;

    background-color: #9186b6;
    grid-area: tab;
    color: #2a2b2c;
    padding: 5px;

    background-color: #AC9F5C;
    grid-area: left;
    padding: 5px;

    background-color: #E4DDBA;
    grid-area: middle;
    min-width: 50vw;
    padding: 5px;

    background-color: #AC9F5C;
    grid-area: right;
    padding: 5px;

    background-color: #9186b6;
    grid-area: bottom;
    color: #2a2b2c;
    padding: 5px;

page no (roughly)paper sizesectiondetailISMG
1A3 LandscapeExploration of the problem to identify requirements and criteriamind-map
  • Analysing
2Development – solution overview and criteriaOne of:
  • Full technology stack or software / service architecture diagram (Unit 1)
  • DFD (Unit 2 onwards)
  • Retrieving and comprehending
  • Communicating
Evaluation criteria – developed from the mind map and the technical proposal (stimulus)Analysis of
prescribedNo databases (P)
Download a file (P)
Upload a file (P)
Password (P)
(taken from stimulus) and
self-determinedCreate a folder (SD)
Work with a screen reader device (SD)
Work on multiple browsers (SD)
Generate funding and revenue (SD)
Product Activation (SD)
criteria, and constraints / limitations.
  • Analysing
3, 4Development – user / application / form interfaceGUI's, site map
  • Retrieving and comprehending
  • Synthesising and evaluating
5, 6Development – Data

(this may only take a page in Unit 1, but will require at least 2 pages in later units. In Unit 1, you can use the extra page to attend other elements)
Identification, analysis and evaluation of available and required data:
  • Unit 1 – that will be generated and / or stored in programming structures
  • Unit 2 onwards – that will be stored, retrieved and manipulated using SQL (CREATE, INSERT, SELECT)
  • Retrieving and comprehending
  • Analysing
  • Synthesising and evaluating
7, 8Development – Algorithms
  • Modular algorithms using
    Inputs: current_folder
    Outputs: list_of_objects
    SET list_of_objects to empty list
    FOR object in current_folder
      APPEND object to list_of_objects
    RETURN list_of_objects
  • Show relationship with GUI components (given the client server context)
  • Unit 2 onwards – include SQL and ERD
  • Show any early refinements made to UI / UX
Can illustrate most elements of all ISMGs
9-14A4 PortraitGeneration - code
  • Clip excess (but show in video)
  • Annotate significant modules of code
Can illustrate most elements of all ISMGs
15, 16A3 LandscapeTesting and evaluationInclude recommendations
  • Synthesising and evaluating
  • Communicating
Appendices (A3 Landscape) not included in page count:
  • References of sources
  • Demonstration of functionality
Other considerations that warrant mention or inclusion:
  • Don't forget video with voiceover, 2 to 4 minutes worth "demonstration of the functionality of the user interface and coded components"
  • Disclaimers, recommendations (justified) and / or refinements
  • User-proofing, aesthetic, navigation, accessibility, usability, utility, effectiveness, safety and learnability considerations
  • Impacts when evaluating - personal, social, economic, legal (use data samples).
  • Ongoing / live documenting of the EDGE process (e.g. a TODO list)
  • Testing methodologies (e.g. test plan)

Software Installs:
  1. Download OBS Studio for Display Capture with verbal annotation of all completed assessments. Once installed, change default recording format from flv to mp4.
  2. Install Pencil Project for GUI mock-ups, and XMind for mind-maps.
  3. Python, and with it, Flask. We will use this for server-side code.
  4. Brackets. Client-side JS, HTML and CSS.
  5. Chrome (if you haven't already). Test browser of choice.