config.body.transition.name: 'none'
config.style.googleFont: "<link href='https://fonts.googleapis.com/css2?family=Lato' rel='stylesheet'>"
config.style.backdrop: 'gray-9'
config.style.page.verticalAlign: 'top'
config.style.page.color: 'gray-0 on black'
config.style.page.link.color: 'rgba(254, 177, 0, 1.0)'
config.style.page.link.lineColor: 'rgba(254, 177, 0, 0.0)'
config.style.page.link.active.color: 'rgba(217, 0, 0, 1.0)'
config.style.page.link.active.lineColor: 'rgba(217, 0, 0, 1.0)'
config.style.page.fork.divider.color: 'gray-8'
config.style.page.fork.divider.style: 'solid'
config.style.page.header.font: 'Lato/serif 14'
config.style.page.header.link.font: '14'
config.style.page.footer.font: 'Lato/serif 14'
config.style.page.footer.link.font: '14'
config.style.page.font: "Lato/sans-serif 18"
//$IMAGE_ROOT: "http://localhost:8888/twine-host/playfulai/"
$IMAGE_ROOT: "https://dcad.awh.durham.ac.uk/playfulai/"
$restartLink: "{link to: 'Restart', label: 'RESTART'}"
$aboutLink: "{link to: 'About', label: 'ABOUT'}"
$historyLink: "{link to: 'History', label: 'HISTORY'}"
$preferencesLink: "{link to: 'Preferences', label: 'SETTINGS'}"
config.header.left: "PLAYFUL AI"
config.header.center: ""
config.header.right: "{link to: 'About', label: 'ABOUT'}"
config.footer.left: ""
config.footer.center: ""
config.footer.right: $restartLink
_imgUrl: $IMAGE_ROOT + "playful.jpg"
_imgAlt: "Playful AI"
--
[align center]
{embed image: _imgUrl, alt: _imgAlt}
[continue]
<h2><i class="fa-regular fa-dice" style="color: white;"></i> Ready to play?</h2>
{embed passage: 'delayed'}
config.header.left: "{link to: 'Start', label: 'PLAYFUL AI'}"
config.header.center: ""
config.header.right: ""
config.footer.right: ""
_twineImgUrl: $IMAGE_ROOT + "twine_100.png"
_twineImgAlt: "Twine"
_chapImgUrl: $IMAGE_ROOT + "chapbook_100.png"
_chapImgAlt: "Chapbook"
_plaImgUrl: $IMAGE_ROOT + "pla.png"
_plaImgAlt: "Playful Learning Association"
_dcadImgUrl: $IMAGE_ROOT + "dcad.png"
_dcadImgAlt: "Durham Centre for Academic Develeopmentn"
--
<h1><i class='fa-light fa-nose'></i> About</h1>
These instructions were created using <a href="https://twinery.org" target="_blank" title="Open Twine in a new tab">Twine</a>
[align center]
{embed image: _twineImgUrl, alt: _twineImgAlt}
[continue]
using the <a href="https://klembot.github.io/chapbook/guide/index.html" target="_blank" title="Open the Chapbook documentation">Chapbook</a> story format developed by Chris Klem
[align center]
{embed image: _chapImgUrl, alt: _chapImgAlt}
[continue]
<i class="fa-solid fa-font-awesome" style="color: #d7f20d;"></i> Some of the icons are from <a href="https://fontawesome.com/" target="_blank">Font Awesome</a>
The instructions have been designed to accompany the **Playful AI workshop**, part of the {link to: 'https://playfullearningassoc.co.uk/', label:'Playful Learning Association'} meeting held at Northumbria University on the 23rd of November 2023
[align center]
{embed image: _plaImgUrl, alt: _plaImgAlt}
[continue]
The session was developed and led by Dr Matt Wood and Dr Malcolm Murray
and conceived in DCAD's Digital Playground at Durham University
No Nic Whittons were harmed during the development of this resource
Version 0.5
[align center]
{embed image: _dcadImgUrl, alt: _dcadImgAlt}
[continue]
> {back link, label: 'OK'}config.header.left: ""
config.header.center: ""
config.header.right: ""
config.footer.right: ""
--
<h1><i class='fa-light fa-rotate-left'></i> Restart?</h1>
Are you sure that you want to restart?\
We haven't finished uploading your address book to ChatGPT yet.
>[[Yes->Start]]
>{back link, label: 'No'}_imgUrl: $IMAGE_ROOT + "codyai.png"
_imgAlt: "cody"
_henryUrl: $IMAGE_ROOT + "Henry.png"
_henryAlt: "King Henry VIII"
_socratesUrl: $IMAGE_ROOT + "socrates.jpg"
_socratesAlt: "A bust of Socrates"
_quizUrl: $IMAGE_ROOT + "quizmaster.png"
_quizAlt: "A man sitting at a desk, surrounded by questions"
config.header.left: "{link to: 'Start', label: 'PLAYFUL AI'}"
config.header.center: ""
config.header.right: "{link to: 'About', label: 'ABOUT'}"
config.footer.left: "{link to: 'character', label:'NEXT'}"
config.footer.center: ""
config.footer.right: $restartLink
--
<h1>{embed image: _imgUrl, alt: _imgAlt}</h1>
We have **three** bots you can try playing with:
- King Henry VIII
- Socrates
- Quizmaster
<h1>1. Try talking to King Henry VIII:</h1>
{embed image: _henryUrl, alt: _henryAlt}
<span style="font-size: 0.8em;">An extract from a painting by {link to: "https://en.wikipedia.org/wiki/Henry_VIII#/media/File:After_Hans_Holbein_the_Younger_-_Portrait_of_Henry_VIII_-_Google_Art_Project.jpg", label: "Hans Holbein the Younger"}</span>
<iframe src="https://widget.getcody.ai/9972fdc9-5e59-4d94-95e0-29228a1970df" style="border:0px;" name="codyai" scrolling="no" frameborder="1" marginheight="0" marginwidth="0" height="400px" width="100%" allowfullscreen></iframe>
<h2><i class="fa-light fa-hand-point-right" style="color: white;"></i> <a href="https://tinyurl.com/askhenry8th" target="_blank" title="Open the King Henry VIII chatbot">https://tinyurl.com/askhenry8th</a></h2>
<hr>
<h1>2. Try a bit of Socratic questioning:</h1>
{embed image: _socratesUrl, alt: _socratesAlt}
<iframe src="https://widget.getcody.ai/9aaca9d6-3d0f-4dc7-a839-8d26f43e8d8a" style="border:0px;" name="codyai" scrolling="no" frameborder="1" marginheight="0" marginwidth="0" height="400px" width="100%" allowfullscreen></iframe>
<h2><i class="fa-light fa-hand-point-right" style="color: white;"></i> <a href="https://tinyurl.com/socraticp" target="_blank" title="Open the Socratic partner chatbot">https://tinyurl.com/socraticp</a></h2>
<hr>
<h1>3. Can you beat the Quizmaster?</h1>
{embed image: _quizUrl, alt: _quizAlt}
<iframe src="https://widget.getcody.ai/9aacb925-4a23-4aa7-a5c0-55ca4a857f68" style="border:0px;" name="codyai" scrolling="no" frameborder="1" marginheight="0" marginwidth="0" height="400px" width="100%" allowfullscreen></iframe>
<h2><i class="fa-light fa-hand-point-right" style="color: white;"></i> <a href="https://tinyurl.com/quiztwurp" target="_blank" title="Open the Quizmaster chatbot">https://tinyurl.com/quiztwurp</a></h2>
<hr>
<h1>Stuff</h1>
You might want to check their <a href="https://meetcody.ai/privacy-policy/" target="_blank" title="View the Privacy Policy - in a new tab">Privacy Policy</a> and their <a href="https://meetcody.ai/terms-conditions/" target="_blank" title="View Cody's terms and conditions - in a new tab">Terms and Conditions</a> or shock us by reading <a href="https://intercom.help/cody/en/" target="_blank">the Manual</a>.
<h1>Play!</h1>
<h2><i class="fa-light fa-user-shakespeare" style="color: white;"></i> <a href="https://getcody.ai/auth/signup" target="_blank" title="Sign Up">Sign up & create some yourself...</a></h2>
<h2><i class="fa-brands fa-padlet" style="color: white;"></i> <a href="https://padlet.com/thisismalcolm/playful_ai" target="_blank">...then share them on the Padlet</a></h2>
[after 1 second]
<i class='fa-light fa-dice-d20 fa-spin'></i>
[continue]
[after 5 seconds]
Let's start with [[Cody->cody]]
[continue]
[after 15 seconds]
Ready for more? How about [[Character.ai->character]]
[continue]
_imgUrl: $IMAGE_ROOT + "characterai.png"
_imgAlt: "character.ai"
_spiderUrl: $IMAGE_ROOT + "text-adventure.png"
_spiderAlt: "spider webi"
config.header.left: "{link to: 'Start', label: 'PLAYFUL AI'}"
config.header.center: ""
config.header.right: "{link to: 'About', label: 'ABOUT'}"
config.footer.left: ""
config.footer.center: ""
config.footer.right: $restartLink
--
<h1>{embed image: _imgUrl, alt: _imgAlt}</h1>
[align center]
{embed image: _spiderUrl, alt: _spiderAlt}
<h2>Text Adventure Game</h2>
This is one example of the bots you can create using this tool. You can be led by the scenario envisioned by the author, or try and subvert it to your own ends.
[continue]
<h2><i class="fa-light fa-hand-point-right" style="color: white;"></i> <a href="https://tinyurl.com/txttrip" target="_blank" title="Open the chatbot">https://tinyurl.com/txttrip</a></h2>
<h1>Stuff</h1>
You might want to check their <a href="https://beta.character.ai/privacy" target="_blank" title="View the Privacy Policy - in a new tab">Privacy Policy</a> and their <a href="https://beta.character.ai/tos" target="_blank" title="View Character.ai's terms of service - in a new tab">Terms of Service</a> or read their <a href="https://book.character.ai/character-book/welcome-to-character-book" target="_blank">extensive manual</a>.
<h1>Play!</h1>
<h2><i class="fa-duotone fa-user-alien" style="color: white;"></i> <a href="https://beta.character.ai/" target="_blank" title="Sign Up">Sign up & create some yourself...</a></h2>
<h2><i class="fa-brands fa-padlet" style="color: white;"></i> <a href="https://padlet.com/thisismalcolm/playful_ai" target="_blank">...then share them on the Padlet</a></h2>