<<set setup.chars to []>>
<<set _char1 to {name: 'Alex*', bio: 'An Experienced instructional designer, and multimedia creator', ID: 0, positions: [-1,1,0,1,0,1,-1,1,1,0], missing: [9], result: 3}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Arman', bio: 'A Senior Learning Development Specialist', ID: 1, positions: [1,1,1,1,1,1,1,0,1,0], missing: [], result: 8}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Carlton', bio: 'An Instructional Designer', ID: 2, positions: [-1,-1,-1,-1,-1,1,0,-1,0,-1], missing: [], result: -6}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Denise', bio: 'A Senior Instructional Systems Designer', ID: 3, positions: [1,1,1,-1,0,0,0,0,1,0], missing: [9], result: 3}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Emily*', bio: 'A Senior Learning Experience Designer', ID: 4, positions: [1,1,1,-1,1,-1,1,0,0,-1], missing: [], result: 2}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'George', bio: 'A Vice President of Learning and Development', ID: 5, positions: [1,1,1,1,-1,0,1,0,0,0], missing: [], result: 4}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Ian', bio: 'An Instructional Systems Designer ', ID: 6, positions: [0,1,1,-1,1,1,-1,0,1,-1], missing: [7], result: 2}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Julie', bio: 'An Associate Professor of Education', ID: 7, positions: [1,0,0,-1,0,0,1,-1,1,0], missing: [9], result: 1}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Matt', bio: 'A Senior Consultant, Training', ID: 8, positions: [1,-1,-1,0,0,0,0,1,-1,1], missing: [], result: 0}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Muhammad', bio: 'An Instructional Designer', ID: 9, positions: [0,0,0,0,0,0,-1,1,-1,-1], missing: [4,5], result: -2}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Paolo', bio: 'An Associate Professor of Book and Media Studies', ID: 10, positions: [1,1,1,1,0,1,0,1,1,-1], missing: [], result: 6}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Paul', bio: 'A Director, Digital Transformation', ID: 11, positions: [1,1,1,0,0,1,0,1,-1,-1], missing: [4], result: 3}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Robert', bio: 'A Learning Technology Manager', ID: 12, positions: [1,1,1,1,1,0,-1,1,-1,1], missing: [], result: 5}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Sami', bio: 'An Instructional System Designer', ID: 13, positions: [1,1,1,0,0,0,1,0,1,1], missing: [], result: 6}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Sara*', bio: 'A PhD Student', ID: 14, positions: [1,0,1,-1,-1,-1,0,1,-1,0], missing: [9], result: -1}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Stephen', bio: 'Researcher, Learning and Performance Support systems ', ID: 15, positions: [0,1,1,1,1,0,1,0,0,0], missing: [], result: 5}>>
<<run setup.chars.push(_char1)>>
<<set _char1 to {name: 'Wai Man', bio: 'An Instructional Designer', ID: 16, positions: [0,0,1,1,0,-1,-1,0,-1,0], missing: [9], result: -1}>>
<<run setup.chars.push(_char1)>>
<<set $chosenCharacters to []>>
/* Development Menu (Change to Start for devmenu)<<link "Start" "Startslide">><</link>><br>
<<link "CharacterSelectTest" "CharacterSheet">><</link>><br>
<<link "Test" "testInclude">><</link>><br>
<<link "Main Lvl" "Main">>
<<run $chosenCharacters.push(0)>>
<<run $chosenCharacters.push(1)>>
<</link>><br>
<<link "End" "Results">>
<<run $chosenCharacters.push(0)>>
<<run $chosenCharacters.push(3)>>
<<run $chosenCharacters.push(4)>>
<</link>><br>
*/<<set $chosenCharacters to []>>
<div class = "centered">
<h3>Choose your characters!<br></h3>
Pick up to three characters to follow through the questions.<br>
(Names with an * are pseudonyms)
</div>
<div id="p5-charselect-container" style="height: 350px;"></div>
<script>
$(document).one(":passagedisplay", function() {
if (window.p5AssetsReady) {
setupCharSelectSketch();
} else {
console.error("Assets not ready yet!");
}
});
</script>
<div class="centered">
<<do>>
<<if $chosenCharacters.length>0>>
<<button "Start!" "Tutorial">>
<</button>>
<<else>>
You haven't picked any characters yet!
<</if>>
<</do>>
</div><div class="column-container">
<div class="column">
<h3>Thank you for playing!</h3>
</div>
<div class="right-column">
<<button "Back to the Start" "Start">>
<</button>>
</div>
</div>
<br>
We are excited to see how the insights shared by our participants will shape ongoing discussions in the field of AI and educational technology. The diverse perspectives from “boosters” to “skeptics” highlight the evolving relationship between AI and instructional design, and we look forward to seeing how the next few weeks, months, and years will further unfold in this rapidly developing landscape.
<br>
<br>
<h3>Credits:</h3>
<div class="column-container">
<div class="column">
''Created by'' <br>
Giuliana Cucinelli <br>
Saul Carliner <br>
</div>
<div class="column">
''Designed by'' <br>
Sebastián Martínez Sánchez <br>
</div>
<div class="column">
''Interviews by'' <br>
Franklin R. Bonivento van Grieken <br>
</div>
</div>
<br>
Generative AI was used to assist in the programming of this artifact.
<br>
This interactive podcast draws on research supported by the Social Sciences and Humanities Research Council.<br>
Produced with funding support from Concordia University Aid to Research Related Events.<br>
<br>
<br>
<div class="column-container">
<div class="column" style="display: flex; justify-content: center; align-items: center;">
<img src="Assets/logos/UCARSCLogo.png" style="max-width: 250px; height: auto;">
</div>
<div class="column" style="display: flex; justify-content: center; align-items: center;">
<img src="Assets/logos/SSHRCLogo.png" style="max-width: 250px; height: auto;">
</div>
</div>This is a test to see if include works!
<<set $included to 1>>
<div class="includedpassage">
<<do>>
<<set $includedSlide to "include"+$included>>
<<print $includedSlide>>
<<include $includedSlide>>
<</do>>
</div>
Did it work?This is the child 1
<<link "Go to child 2">><<set $included to 2>><<redo>><</link>>
here ends child 1Here ends child 2<<set $question to 1>>
/*included passages */
<div class="includedpassage" style="height: 250px;">
<<do>>
<<set _currentSlide to "Question"+$question>>
<<include _currentSlide>>
<</do>>
</div>
<div class="column-container" style="margin-bottom:-30px">
<div class="column">
<img src="Assets/logos/skeptLogo.png" width="150">
</div>
<div class="right-column">
<img src="Assets/logos/boostLogo.png" width="150">
</div>
</div>
<div id="p5-interface-container" style="width: 800px; height: 200px;"></div>
<script>
$(document).one(":passagedisplay", function() {
if (window.p5AssetsReady) {
setupInterfaceSketch();
} else {
console.error("Assets not ready yet!");
}
});
</script>
<br>
/*Nav Buttons */
<<do>>
<div class="column-container">
<div class="column">
<<if $question>1>>
<<button "Previous Question">>
<<set $question-=1>>
<<redo>>
<</button>>
<</if>>
</div>
<div class="right-column">
<<if $question<10>>
<<button "Next Question">>
<<set $question+=1>>
<<redo>>
<</button>>
<<else>>
<<button "Finish" "Results">>
<</button>>
<</if>>
</div>
</div>
<</do>><h3>Question 1:<br></h3>
<h1>How do you define AI?</h1><h3>Question 2:<br></h3>
<h2>How do you expect AI to affect your work as an educational technologist/educator?</h2><h3>Question 3:<br></h3>
<h1>In your view, what is the biggest opportunity that AI presents to educators?</h1><h3>Question 4:<br></h3>
<h2>What is the biggest threat?</h2><h3>Question 5:<br></h3>
<h1>What assumptions about instruction change when AI enters the picture?</h1><h3>Question 6:<br></h3>
<h2>What skills will you need to develop to work with AI as an educational technologist/educator? How will you develop them?</h2><h3>Question 7:<br></h3>
<h1>In your view, what ethical aspects should we consider when integrating AI in educational settings?</h1><h3>Question 8:<br></h3>
<h2>How have you integrated AI in your classroom/work/educational setting?</h2><h3>Question 9:<br></h3>
<h1>In your view, what are some of the limitations of AI in education?</h1><h3>Question 10:<br></h3>
<h2>What would you ask the AI?</h2><h3>Your Characters' Results are:</h3>
<div class="column-container">
<<for _i to 0; _i < $chosenCharacters.length; _i++>>
<div class="column" style="display: flex; justify-content: center;">
<div class="ResultSheet" style="width: 200px;">
<h3 style="text-align: center;"><<print setup.chars[$chosenCharacters[_i]].name>></h3>
(<<print setup.chars[$chosenCharacters[_i]].bio>>)
<br>
<<set _result to setup.chars[$chosenCharacters[_i]].result>>
<<if _result < -1>>
is a <span class="skeptText">''Skeptic''</span> of AI in education.
<<elseif _result > 5>>
is a <span class="boostText">strong Booster</span> of AI in education.
<<elseif _result > 1>>
is a <span class="boostText">moderate Booster</span> of AI in education.
<<else>>
is ''mostly Ambivalent'' about AI in education.
<</if>>
<br>
<br>
Here is a breakdown of their answers, per question:
<br>
<br>
<<set _imgsource to "Assets/resultGraphics/results" + $chosenCharacters[_i] + ".png">>
<img @src="_imgsource" width="200px">
</div>
</div>
<</for>>
</div>
<br>
<div class="column-container">
<div class="column">
<<button "Play again!" "CharacterSheet">>
<</button>>
</div>
<div class="right-column">
<<button "Finish up" "Ending">>
<</button>>
</div>
</div>/*Change to Startslide for dev menu*/
<div class = "centered">
<img src="Assets/logos/mainLogo.png" height="250">
</div>
<br>
In May 2024, we hosted a Summer Institute and Symposium on “AI and Education: Applications in Instructional Design and Human Performance Technology.” During the event, we interviewed several professionals working in educational technology, exploring their experiences and perspectives on AI in the workplace. This interactive podcast series presents the insights gathered, showcasing a spectrum of views from “boosters” to “skeptics” across various key questions.
<br><br>
<div class = "centered">
<<button "Start!" "CharacterSheet">><</button>>
</div>
<br><br>
/* Front Page Logos. Remove comment to add.
Created with funding from:
<div class="column-container">
<div class="column" style="display: flex; justify-content: center; align-items: center;">
<img src="Assets/logos/UCARSCLogo.jpg" style="max-width: 200px; height: auto;">
</div>
<div class="column" style="display: flex; justify-content: center;">
<img src="Assets/logos/SSHRCLogo.png" style="width: 200px; height: auto;">
</div>
</div> */<h3>How to play:<br></h3>
Follow how your characters think through AI as you progress through the questions. Click on your character's badge to listen to their response to the current question. Remember to check in with them every time you move on to a new question!<br><br>
<div class = "centered">
<img src="Assets/tutorial.jpg" style="max-width: 600px; height: auto; border: 4px solid black;">
</div>
<br>
<div class = "centered">
<<button "Got it!" "Main">>
<</button>>
</div>