Many, many years ago, I went to an Edtech conference and saw a wonderful design built by Ultralab which allowed students to create their own Superheroes and then 'battle' them off in the form of a squash ladder style competition eg 1st plays 10th and if 10th wins, they swap places.
Ultralab was created and run by Professor Stephen Heppell and was once one of Europe's leading elearning research institutes, pioneering cutting edge applications that could be used in schools. It is sadly no more but the idea has always stuck with me and now with the advent of ChatGPT and our work on Design Thinking, am I able to bring elements of it back to life.
In the Ideation stage of Design thinking, students brainstorm a list of possible ideas that could be created into a prototype to solve a particular problem. The first stage is to list as many possible ideas, without judgement. The second stage is to then filter them down so that they are left with one.
Using ChatGPT, I designed a webpage where students could enter their ideas via an Input form:
When they pressed the Add Idea button it would then go into the Ideas League Table:
The first idea would be entered 1st, the 2nd idea 2nd and so on. Here is a table with 4 ideas:
As each idea is added then below this table, a fixture list is created where each idea is pitted against the other:
Now comes the fun part. Using the fixture list, students will play one idea off against the other eg TikTok video v Poster Campaign. They decide which one is better (using the criteria they have decided). They can then click on the 'winning' idea and it will go green (as a reminder):
They then move back to the League table and if the lower placed idea is a winner, then they drag it on top of the higher placed idea and they swap places!
At the end, their league and table may look like this:
Students can see the winners and losers from the ideation stage and more importantly, which idea they will take towards prototyping..
How did I do it?
As always, it is a team effort between me at ChatGPT v3.5. This particular design took 15 iterations, mainly because I changed the original model to include the fixtures table. For those interested in the prompt it was:
Can you create me a squash ladder style table on a website where the solutions are the squash players. The title of the website is Choosing the Best Idea for your Prototype. Underneath, put the instructions on three lines using body text style but for the moment, just write loren ipsum filler text. I want an input form to enter the solutions. I need to enter one solution at a time into the second column of the table. Enter the ordinals 1st, 2nd, 3rd and so on in the first column as each solution is entered. The ordinals in the first column should be fixed and centered. They cannot move. The solutions should be placed in order one underneath each other, in the second column of the table, adjacent to the position and left aligned. The table cells must have style border: 1px solid #ddd;
When I drag the text of one solution on top of another, I want them to swap rows eg if I drag the 4th row onto the 1st row then 1st row becomes 4th row and 4th row becomes the 1st row. I want to be able to drag and drop the solutions in any position. The title should be in Tahoma Size 24 bold and blue. Make all text including the input boxes Tahoma Size 14 and black. Make the entire table width be 70% and have a white background. Make the fixed order boxes have a light blue background and width of 60 pixels. Can you make the 1st place position only filled in light green.
After all the solutions have been entered, can you make up a table at the bottom showing all the possible fixtures between the solutions. The table should have 3 columns. The two solutions should be in columns 1 and 3. The entries in the table must not change even when you change positions of the rows in the first table. I want to indicate who has won a fixture, make the background colour for columns 1 or 3 go to light green when you click on it. If you click on it again, the colour should go back to what it was before.
The javascript and html and css on the same web page.
I copied the code created into Notepad and from there made the website:
I made a few additional stylesheet and html changes outside of this to include the subheadings and table background colours.
It works pretty well and I am pleased that the great idea I saw probably 20 years ago has now been brought pack and made into an interactive Canvas page that all our subjects can use in their Design Thinking projects..
Any feedback or thoughts always welcome...
Next steps/Improvements?
Having written it, I wonder if it would be possible for position to change automatically when you clicked on fixture list? That said, I like the idea that students move the item after the discussion.
Spent about 3 hrs trying to automate this fully. Came close but frustratingly not consistent progress. Clearly there are some tricks and tips to learn when prompting for javascript. At the moment, it feels that every iteration is not really building on the previous one.
1 hour later..
Well I managed to automate it and made some changes along the way:
The page is less cluttered:
The ideas are added through a pop-up menu:
The Fixtures menu is clearer with the addition of a Game number column and making Idea 1 and Idea 2 the same width:
Filling out the fixtures, I initially played about with having two colours - green for win and red for loss but stuck with just green.
I also added in a pop-up message to tell the team when the fixtures were completed:
The best idea appears at the top and has a green background:
There is also a Reset Fixtures button and warning message if you want to clear the table:
Very pleased that it all worked out...
