Skip to content

jamesabela/jsfun

Repository files navigation

jsfun

This tool started as a way to help with Python programming, but has expanded rather a lot! The main tool is Python Display tool I did use AI to help program these, sometimes it really helped and sometimes it basically needed to be fed the code! Many of these tools use longer urls than usual, so feel free to use a url shortener such as: Tinyurl

CS Specific tools

Scratch projects

Fun tools

There is now a host of little tools that enable you to enter in some text or links and then use the results. In most cases, the link updates so that you can easily come back.

Question tools

Choosers

Discussion tools

Brainstorming tools

Image fun

  • Tile Reveal Game - Link an image and play a game to see who can guess what it is first
  • Image Reveal - Fun spotlight to investigate an image. Great for younger children to explore.
  • Image Compare - A tool to see two images over the top of each other. Great for Now & Then or even just comparing which you like best.

Data literacy tools

Can you believe that nobody has made a game of spreadsheets? Well I've made one and its addictive. Find the cell

Word & literacy tools

Timer

Python Display Tool Features

A display tool that will enable you to download Python files as either .py files or .txt files if your firewall is very restrictive. It enables you to choose dark mode or light mode and it enables you to go full-screen.

For code under 20 lines it will make a puzzle too!

How to use

Raw file

Click on Python Code Display Tool You can then add a url to raw gist file. such as: https://gist.githubusercontent.com/jamesabela/53cc928fd03720c0803839b31bcda287/raw/635a2c7b12a1a6af75623d65d41889e8e1bbce96/average.py

It will then update with the new url. To embed this into your own site, just add the final url that appears:

e.g. https://jamesabela.github.io/jsfun/pythoncopy?url=https://gist.githubusercontent.com/jamesabela/53cc928fd03720c0803839b31bcda287/raw/635a2c7b12a1a6af75623d65d41889e8e1bbce96/average.py

You can display nearly any Python file you choose, make a Parsons puzzle of the first 20 lines and get step by step display from Pythontutor.com

Why download a text file?

Some school firewalls don't allow you to download .py files, because they are executables, so this ensures they are not.

Advanced use

Use ?url= to add the site you want. It needs to be a raw Python file.

Example: https://jamesabela.github.io/jsfun/pythoncopy?url=https://gist.githubusercontent.com/jamesabela/cf6a0c1725a3212dedd77657911f2a63/raw/964efc7fc9df266ebe5f2826d97fe719868dc62b/pi.py

For up to 20 lines you can use the reordering quiz. It uses the same format: https://jamesabela.github.io/jsfun/reorder?url=https://gist.githubusercontent.com/jamesabela/ce1a69f05f78fa56fbd03a4f31d13978/raw/4ff44e44fae1192081ebed6f793fd34ae68c1d6d/grocer.py Simply use ?url= and the url you want to display.

You should be able to use any file on github and probably other sites too. I've put some of the common algorithms for iGCSE below as a tester.

iGCSE Algorithms

Diamond 9s

A Diamond 9 is designed for discussion and there is no correct answer. It automates this set of slides

Topic Corresponding Words
Computer Networks Components Routers, Switches, Firewalls, NICs, Cables, Modems, Bridges, Gateways, Repeaters
Cybersecurity Threats Phishing, Malware, Social, Ransomware, DDoS, Physical, Spyware, Adware, Keyloggers
Ethical Issues in Computing Privacy, Security, Property, Divide, Automation, Open, Transparency, Accountability, Consent
Hardware Components of a Computer CPU, RAM, Storage, Motherboard, Power, Peripheral, Monitor, Keyboard, Mouse
Key Algorithms Sorting, Searching, Graph, Dynamic, Greedy, Recursion, Tree, Backtracking, Hashing
Programming Concepts Variables, Functions, Loops, Algorithms, Objects, Syntax, Data, Pseudocode, Operators
Programming Paradigms OOP, Procedural, Functional, Event-Driven, Logic, Declarative, Imperative, Concurrent, Aspect-Oriented
Software Development Lifecycle (SDLC) Stages Requirements, Design, Implementation, Testing, Deployment, Maintenance, Planning, Review, Closure
Types of Software Testing Unit, Integration, System, UAT, Regression, Alpha, Beta, Load, Stress

Link Two Sides

Puzzle Url Left Side (Description) Right Side (Answer)
Programming Constructs A loop that repeats a set of instructions a known number of times. For loop
A condition that checks if a statement is true or false. If statement
A loop that continues until a certain condition is met. While loop
A command that allows a program to skip instructions if a condition is false. Else statement
Logic Gates Outputs true only when both inputs are true. AND gate
Outputs true when either input is true. OR gate
Outputs true when neither input is true. NOR gate
Outputs true only when the inputs are different. XOR gate
Data Storage Volatile memory that stores data temporarily. RAM
Non-volatile storage device that stores data permanently. Hard Disk Drive
A portable storage device that can be connected via USB. USB Flash Drive
Data storage medium that uses lasers to read and write data. Optical Disc
Networking Concepts A unique identifier assigned to devices on a network. IP Address
The standard communication protocol of the internet. TCP/IP
A device that forwards data packets between networks. Router
A computer that provides services to other computers over a network. Server
Algorithm Basics A step-by-step procedure for solving a problem. Algorithm
A structure used to represent a decision-making process. Flowchart
An ordered list of elements. Array
A branching point in a program where multiple options are possible. Decision
Pseudocode Statements A statement to count. FOR Count ← 1 TO 10
A statement to total. Value ← Value + NewValue
A statement to start a pre-condition loop. WHILE Value > 10 DO
A statement to start a post-condition loop. REPEAT
Programming Concepts Library routine A standard subroutine that is available for immediate use.
Structure diagram An overview of a program or subroutine.
Procedure A subroutine that may not return a value.
Function A subroutine that can be used in an assignment statement.
Program Development Life Cycle Stages Develop an algorithm to solve the problem by using structure diagrams, flowcharts, or pseudocode Design
Detect and fix the errors in the program Testing
Identify the problem and its requirements Analysis
Write and implement the instructions to solve the problem Coding
Pseudocode Keywords Stores data in a file WRITE
Retrieves data from a file READ
Displays data on a screen OUTPUT
Enters data from a keyboard INPUT
Data Types A whole number INTEGER
A single letter CHAR
A word or phrase STRING
A number with two decimal places REAL

Triangle Discussion Tool

A triangle discussion tool is a tool used in English language learning to get discussion going. It encourages you to discuss which is the most important word and why. It can lead to some wonderful open ended discussons and they sometimes get quite deep! Here are some computer science themed triangles. The random button will generate more general discussions on common topics.

Issue Word1 Word2 Word3 HTTP Link
Security Security Privacy Encryption https://jamesabela.github.io/jsfun/triangle.html?word1=Security&word2=Privacy&word3=Encryption
Scalability Scalability Performance Cost https://jamesabela.github.io/jsfun/triangle.html?word1=Scalability&word2=Performance&word3=Cost
Ethics Ethics Bias Responsibility https://jamesabela.github.io/jsfun/triangle.html?word1=Ethics&word2=Bias&word3=Responsibility
Data Data Storage Integrity https://jamesabela.github.io/jsfun/triangle.html?word1=Data&word2=Storage&word3=Integrity
AI AI Automation Intelligence https://jamesabela.github.io/jsfun/triangle.html?word1=AI&word2=Automation&word3=Intelligence
Privacy Privacy Consent Tracking https://jamesabela.github.io/jsfun/triangle.html?word1=Privacy&word2=Consent&word3=Tracking
Accessibility Accessibility Usability Inclusion https://jamesabela.github.io/jsfun/triangle.html?word1=Accessibility&word2=Usability&word3=Inclusion
Sustainability Sustainability Energy Efficiency https://jamesabela.github.io/jsfun/triangle.html?word1=Sustainability&word2=Energy&word3=Efficiency
Cybercrime Cybercrime Fraud Phishing https://jamesabela.github.io/jsfun/triangle.html?word1=Cybercrime&word2=Fraud&word3=Phishing
Open Source OpenSource Collaboration Transparency https://jamesabela.github.io/jsfun/triangle.html?word1=OpenSource&word2=Collaboration&word3=Transparency
Digital Divide DigitalDivide Access Education https://jamesabela.github.io/jsfun/triangle.html?word1=DigitalDivide&word2=Access&word3=Education
Algorithms Algorithms Optimization Complexity https://jamesabela.github.io/jsfun/triangle.html?word1=Algorithms&word2=Optimization&word3=Complexity
Networking Networking Bandwidth Connectivity https://jamesabela.github.io/jsfun/triangle.html?word1=Networking&word2=Bandwidth&word3=Connectivity

Known limitations

  • Code Display doesn't work with Pastebin
  • Code Display can only visualise up to 5600 bytes. (Python tutor limit)
  • When embedded in Google Sites, doesn't allow full screen display (This is a limit on all web pages in sites).

This work by James Abela is licensed under CC BY-NC-SA 4.0

About

Some fun things with JavaScript

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

Packages

No packages published

Languages