Creating a Branching Scenario in Canvas

What in the world is a branching scenario?

Canvas typically follows a sequential progression. Module 1 comes before module 2 and module 6 typically follows module 5. At the institutions where I teach, each module or unit will have something of a sequence as well, with a unit overview followed by a readings and assignments page, etc.

In my branching scenario, there is no order to the progression and the Canvas content depends on the path that students choose. This can result in a fun and interactive “choose your adventure” sequence where not all students will choose the same paths or encounter the same information. In my example for this tutorial, I chose to have three levels - though you could have one fewer or many more depending on your curriculum and lesson goals.

In my example, students will start at the home page and depending on their choices they will discover one of six possible pandas. Your second and third levels may have many more options than mine, and you may even choose to go deeper than I did and add more levels. But the basic principles still apply. The YouTube tutorial will walk you through the concepts and structure of my branching scenario. Below you will find the code that I used on my pages. Be mindful that you will want to replace my URLs with the URLs to the pages in your course, and you’ll want to replace my panda images with your own.

Level 1 - my home page

<h2>Instructions</h2>
<p>Click on one of the paths below. Select either Red, Blue, or Green.</p>
<div class="grid-row">
    <div class="col-sm-4">
        <div style="background-color: #c73c3a; text-align: center; padding: 50px 20px;">
            <p>
                <a class="btn" href="https://canvas.instructure.com/courses/3331157/pages/red">Red</a>
            </p>
        </div>
    </div>
    <div class="col-sm-4">
        <div style="background-color: #2684c7; text-align: center; padding: 50px 20px;">
            <p>
                <a class="btn" href="https://canvas.instructure.com/courses/3331157/pages/blue">Blue</a>
            </p>
        </div>
    </div>
    <div class="col-sm-4">
        <div style="background-color: #98c730; text-align: center; padding: 50px 20px;">
            <p>
                <a class="btn" href="https://canvas.instructure.com/courses/3331157/pages/green">Green</a>
            </p>
        </div>
    </div>
</div>

Level Two (red page)

<div style="background-color: #c73c3a; text-align: center; color: white; padding-bottom: 50px;">
    <h2 style="padding: 50px 0px;">You have chosen the color RED. Now choose whether you want to go down the path of darkness or light.</h2>
    <div class="grid-row">
        <div class="col-sm-6">
            <div style="background-color: #dd8a88; padding: 50px 100px;">
                <p>
                    <a class="btn" href="https://canvas.instructure.com/courses/3331157/pages/red-light" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/3331157/pages/red-light" data-api-returntype="Page">Light</a>
                </p>
            </div>
        </div>
        <div class="col-sm-6">
            <div style="background-color: #772422; text-align: center; color: white; padding: 50px 20px;">
                <p>
                    <a class="btn" href="https://canvas.instructure.com/courses/3331157/pages/red-dark" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/3331157/pages/red-dark" data-api-returntype="Page">Dark</a>
                </p>
            </div>
        </div>
    </div>
</div>
<p>
    <a class="btn" style="margin: 25px;" href="https://canvas.instructure.com/courses/3331157/pages/start-here" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/3331157/pages/start-here" data-api-returntype="Page">Start Over</a>
</p>

Level 3 (light red)

<div style="background-color: #dd8a88; text-align: center; color: white; padding: 50px 20px;">
    <img id="149034497" style="margin: 100px;" role="presentation" src="https://canvas.instructure.com/courses/3331157/files/149034497/preview" alt="" width="450" height="450" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/3331157/files/149034497" data-api-returntype="File" />
</div>
<p>
    <a class="btn" style="margin: 25px;" href="https://canvas.instructure.com/courses/3331157/pages/start-here" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/3331157/pages/start-here" data-api-returntype="Page">Start Over</a>
</p>

Again, you’ll want to replace my URLs with your own and you’ll want to put your own content. If you would like to tinker with my page designs in your own Canvas environment for practice, you can download my course from Canvas Commons:

https://lor.instructure.com/resources/0450f83b88e34fd092484946083a3912?shared

This is just a first step to creating a fun and interesting branching scenario. Consider using images or illustrations as buttons, and creating a deep choose your own adventure narrative. You can also have students creating their own branching scenarios that they can work with you or a TA to create in Canvas.

---

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas