Adobe XD, Canvas LMS and Dreamweaver

[josuecarames]

I'm a beginner with Adobe XD and Dreamweaver and would like to create a web-like-experience in an online course in Canvas LMS. I thought that I could design the interactive user experience, design and content with Adobe XD and then simply embed it in Canvas, which is the LMS that we use in our school. Can anyone help me understand if this is possible? I was able to embed a very precarious sample and it worked but not sure whether I should use a different program such as Captivate or so on... Thanks for your help

[Preran]

From what I know, this isn't a supported workflow. Adobe XD is a software used to prototype your applications. You will have to export your assets and recreate them in a software of your choice to develop your final application.

Thanks,

Preran

[josuecarames]

Should I use Dreamweaver instead to create a homepage for my course? or should I simply use Captivate? Can I export my work in Adobe XD to Captivate? Can I do that by keeping the wired (linked) connections between the different pages?

Thanks Preran!

[Preran · Accepted solution]

Hard to comment without knowing the details of how you want to present your course, and the other intricacies involved.

-  If you desire your course to work on all browsers, and you are conversant with the coding effort required to that end, you can use Dreamweaver.

- With Captivate, you can create the course in the software, and export and publish it to the web. How to publish Adobe Captivate projects to the web using FTP

Coming to Adobe XD, no you cannot preserve links after you export to DW or Captivate. You will have to recreate those in the respective software.

Thanks,

Preran

[mathn71420507]

Canvas LMS uses Bootstrap. And sanitizes all Javascript and CSS from its inline RTE. So its tough to use third party tools lik XD or Dreamweaver to create inline usable HTML. You can always embed a HTML, but then you lack access to all Canvas LMS default options like grading due to CORS-security.

[Tammy_Moore]

I know this is an old thread, but likiely when people are doing a search this will pop up as one of the hits. 

I work with Canvas as an Intrsutional designer supporting two science departments. Yes, the plain vanilla Canvas HTML is a little limiting. You can go beyond the limitations using a few different methods.

Interaction Creation:
Stop working with Adobe XD and instead put your learning energies into tools that give you production code, not just a prototyping tool which is what XD is. Most instructional designers use any one of the follwoing tools:

• Adobe Captivate - If you want to stay in the Adobe universe, this is a great option. However, it is not included in the Suite. It will be an extra purchase. I have used it heavily since around 2004-ish and compared to most competitors it gives me a lot of power such as advanced actions and the ability to inject Javascript. Since your post is in the coding realm, I would think this means you are willing to go beyond plug and play and want to eventually gain skills with custom coding too.
• Storyline. This is Adobe Captivates most direct competitor. I used this alongside Captivate for a few years, but it only ran on a PC so I had the added cost of Parallels to run it on my Mac. when Parrallels moved to a new version so I was no longer getting free updates, I decided to drop both. At that time, Storyline was no where near as powerful as Captivate yet it cost more (not counting the added cost of Parallels). It was a no brainer to drop it unless I found that I had far more clients insisiting on it than I wanted to pass on.
• Adobe Animate. While the tool is focused on animation, you can connect up Javascript to control the animations. EXAMPLE: One of my Adobe animations with code associated with custom timeline scrubber in the lower right. I have used this when what I need for an interaction is heavily dependent on animations. It has a fair number of Javascript built in that you can select and it has some nice code hinting built in. However, you can also add your own custom Javascript as well. An example of this is that I wanted a custom animation controlled that looked like a wheel and the user could roll it left and right along a little track to make the animation's . After I built this out, I then brought it into Captivate. 
  
  
  Code Editor:
  You can create the content using a code editor. Dreamweaver is a code editor, but Adobe is not really continuoing to develop it any more. I switched over to Visual Studio Code which is a free code editor. NOTE THAT they also offer Visual Studio, don't get the shorter named one that one is like trying to learn to ride on a draft horse as your first experience riding. Visual Studio Code is a powerhouse, but without the more complicated than you need IDE side of things.
  
  Feel free to browse my Instructional Design Collection on Behance. It has not only my visual design work but also my interaction design examples.

[rayek.elfin]

To amend @Tammy_Moore 's answer: aside from Captivate and Animate, other options for highly interactive learning content are visual game engines such as:

• Gdevelop https://gdevelop.io/ A free open source and feature rich visual game authoring environment that exports projects directly to the web or an executable for Windows, Mac, Linux and mobile platforms. Very easy to learn.
  Compared to Adobe Animate it lacks the animation timeline, but it is easy to import animations from other apps and the easy to learn visual programming makes it a doddle to generate highly interactive content and games at a rapid rate. It's also free and runs on the web - also interesting for kids to create their own content, btw. It is free for download and use, although the number of mobile app export is limited per day unless the user pays for additional ones, I believe. Other than that: completely free! No subs, no licensing, just download, install, and start creating. Or use the online version.
  Exports to html5 projects for inclusion in learning environments.
• Godot https://godotengine.org/ Again an open source and free option. This does sport an animation timeline, and also supports 3D projects aside from 2d ones. This one is more complex to learn, but does have an extension that allows for Scratch-like visual programming, which simplifies the coding process dramatically.  Has a built-in GUI system as well. No limitations and it is completely free.
  Exports to a webassembly based web project for inclusion in learning environments.
• Construct 3 https://www.construct.net/en Similar to Gdevelop, Construct is a commercial alternative. It also comes with an animation timeline. Very easy to learn and use to create complex interactive learner projects. Exports to html5 and most other platforms. Subscription only, however, and lacks a desktop version (browser-based only).

Other game engines exist, of course, but these are very popular and have been used for interactive learning content. A mountain of YouTube tutorials are available online for these.

Here is an example of Gdevelop that is used for large touch-screen educational games at the Baltic Sea Science Center at the Skansen museum in Sweden:

https://gdevelop.io/blog/making-interactive-experiences-museums-gdevelop

Quite amazing for a completely free and open source product! 🙂