Rotate an Image in CD Menu Maker (animated gif)

In this article I will be discussing a few tricks to create the appearance of an image rotating.  You can’t actually programmatically rotate an image component in Cd Menu Maker so I came up with 2 ways to work around it.  The first way is to create an animated gif and place it in an HTML Canvas.  The second way is to swap images based on a timer.  In this article, I will be discussing the animated gif method.  This will require some knowledge of image editing software like Fireworks, Photoshop,  ImageReady etc. to create your gif file.

Note: You can visit download.com and search for “animated gif” to find inexpensive or free software to create your gif

After your gif is created, open up CD Menu Maker and Create a New Project.  Begin typing a name and select the Blank Project template.   Add your animated gif to your project by click Project > Add/Remove Project Files > Add File or Resource in the Menu bar.

Browse and locate your animated gif, click OK and Done.

Click the HTML Canvas component in the Add components panel, give it a name and click OK.   Type dep\YOURFILENAME.gif in the Initial page to Display box and click OK. 

Click Preview in the Project Toolbar to view the animated gif. 

To remove the scroll bar and border, simply place the browser component inside a Layer/Page that is smaller than the browser component to hide the edges as shown below.

Rotate an Image in CD Menu Maker (swap images)

In this article I will be discussing a few tricks to create the appearance of an image rotating.  You can’t actually programmatically rotate an image component in Cd Menu Maker so I came up with 2 ways to work around it.  The first way is to create an animated gif and place it in an HTML Canvas.  The second way is to swap several images based on a timer.  In this article, I will be discussing the swap image method.  This will require some knowledge of image editing software like Fireworks, Photoshop, etc. if you would like to create your own animation. 

Here are 4 images that are rotated slightly until the rotation is complete. 

Save the images above (right click, save image as) and be sure to keep the names sun1.jpg, sun2.jpg, sun3.jpg and sun4.jpg.  Add the images to the project by clicking Project > Add/Remove Project Files > Add File or Resource

After all of the images are added, click the Image component in the Add Components panel.  Give it a name of img_sun and click OK.  Browse and select the first image of the animation sequence (sun1.jpg). 

The next step is to start the event timer.  Right-click on the canvas and select Event > On_frmCanvas_Load().  Once the Actions Menu is opened, click the Code Editor button on the bottom left and paste the following code:

frmCanvas.eventtimer.interval = 50

When the interval = 1000, the function will fire every 1 second.  In this case, I want the application to swap the image 20 times per second to ensure that I will have a smooth animation. 

Note:  Animations may differ so 20 times a second may be too much or not enough so adjust accordingly

Now I need to swap the image every time that the interval is fired.  You will need to click the Events button in the Project Toolbar and select {Global Code}.  Paste the following code:

dim increment

increment= 1

This variable will keep track of the image number that will be swapped and will be “incremented” each time the timer is fired.

Right-click on the canvas and select Event > On_frmCanvas_EventTimer().  Once the Actions Menu is opened, click the Code Editor button (if needed) on the bottom left and paste the following code:

If increment < 4 Then

increment = increment + 1

Else 

increment = 1

End If img_sun.Picture = Loadpicture(system.AppRootFolder & “dep\” & “sun” & increment & “.jpg”)img_sun.Refresh

Code Explained:  

Line 1 will check to see if the “image counter” (increment) exceeds the total number of images in the project.  If it does not exceed the image number it will proceed to line 2 and add 1.  Once the image number has been exceeded, the “image counter” (increment) will proceed to line 4 and reset to 1. 

Line 6 Once the If statement above determines which image number to swap and Loads the image into the img_sun component.

Line 7 Refreshes the image component for a smooth animation

Note: If the images above were not used, you must customize the function to correspond with amount of images used and adjust any component name or image name that may differ from above

Click Preview in the Project Toolbar to view the image rotating.

You can download the completed animation here: rotate.zip

Add a Swap a Caption Action to CD Menu Maker

In this article I will be discussing how to add a custom Action in CD Menu Maker that will swap text when an Event takes place. 

First, download the Custom Wizard I created using the Custom Code Wizard Template and unzip it.  

Download: swap-a-caption.zip (1.7 MB)

Navigate to the folder below:

On XP 

C:\Documents and Settings\YOUR USER NAME\Application Data\Atrixware\CD Menu Maker\wizards\ 

On Vista 

C:\Users\YOUR USER NAME\AppData\Roaming\Atrixware\ CD Menu Maker\wizards\ 

Drag the Swap a Caption folder inside the wizards folder and open CD Menu Maker. 

Click Create a New Project and select the Business Training 1 Template.   Select any button, click the Events button in the Project Toolbar and select On_MouseClick. 

Click New Action and select +Swap a Caption. 

Select the header component to swap the caption on, enter the rest of the required information and click OK.

Note:  You can click the code button to view the code that this wizard will write

Click Preview in the Project Toolbar and click the button that has the Swap Caption action applied to it. 

Adding Flash content to Weblearning

In this article, I will discuss how you can embed a Flash video into your Weblearning course layouts, quizzes, presentations etc.

I will start by uploading my Flash Video to Weblearning by clicking the Files tab > Browse > Upload.   Now we need to get the path where the file is located to put in the code later.  Click the Existing Uploads tab > Videos > View.  Copy the URL in the Address Bar of your browser (or keep the browser opened to copy later).

Now create a new course by clicking the Courses tab and click Create a New Course.

Give your course a name then click the Layout & Design tab.

If you already have a course created, click your Courses tab > admin tools > properties and settings > Layout & Design.

Click Tab 1 and click HTML button at the bottom right of the editor.

Paste this code below all of the existing code

<embed src="http://pro.weblearningcenter.net/lms/atrixware_tech2/qc_imagerep/ball.swf" wmode="transparent" width="425" height="350"></embed>

Replace

http://pro.weblearningcenter.net/lms/atrixware_tech2/qc_imagerep/ball.swf

with the url that was copied earlier and change the height and width to match your movie.

Your video is now inserted and should look similar to the image below.

Click Submit Changes and then preview it.  If you have created a new course as I did, you need to add a student to the course so you can login.  Click the Courses tab > admin tools > student enrollments and add a student.  Click your Courses tab > portal then login.

Your Flash video will now be available to view in Tab 1 of your course page.

Creating Dynamic Questions and Answers

Did you know that if you are distributing ELearning Packaged Tests or using the LAN based testing components, you can create question text and choices that contain dynamic (changing) values?

Here is a simple example. Consider this Quiz Question:

Dave has 2 apples. Jane has 1 apple. How many apples do they have total?

Suppose we want to change the names each time. Suppose we want to change the TOTAL # apples each time. We can do both – so let’s get started.

First, go to the question wizard, and pick BASIC STYLES > MULTIPLE RESPONSE:

Click ADD QUESTION, and the Question entry wizard will appear. Enter the question text, and (for this example) 4 choices:

Click NEXT (to save the question), and then close the Question Wizard form. Your new question should be listed in the question list.

Now, if you want the names Dave and Jane to be dynamic (meaning, they will be different each time), first double-click the question to open it up in the Question Editor, click the VIEW CODE tab, and click APPLY. When you click APPLY, you will be able to enter some PowerScript code. This is where we will define the ‘pool’ of names we will use. Enter the following code:

' Set Up Name Choices and Variables
ExecuteGlobal("Dim name1, name2")
'
' Create Possible Names
name1_choices = Array("Bob", "Dave", "Steve", "Joe")
name2_choices = Array("Alice", "Jane", "Mary", "Lisa")
'
' Pick a Randon Name for Each One
For i = 0 To Second(Time)
name1 = name1_choices( int(rnd(1)*4) )
name2 = name2_choices( int(rnd(1)*4) )
Next

Now, click the QUESTION/CHOICES tab, and click the FULL EDITOR button. Highlight the word Dave in the editor, and then click the INSERT DYNAMIC VALUE button:

Enter name1 into the blank and click OK. Notice that the name Dave has been replaced with <%name1%>.

Follow the same steps for Jane (highlight Jane, click insert dynamic value) – this time enter in the phrase name2 and click OK. Your question should look as follows:

Click SAVE on the FULL EDITOR, and you will be returned back to the Question Wizard. Now click the PREVIEW QUESTION tab and then click COMPILED PREVIEW. If you do it a few times, you should see that the names change each time:

Changing the ANSWER is a bit more complex. The reason is, we need to make sure that each of the incorrect/detractor answers are never the same value as the correct answer. In our example, we have used the values 2, 5, and 7 as detractor values, so we never want those values to be the correct value.

Keeping that in mind, let’s go back to the code editor (VIEW CODE tab), and modify the code as follows:

' Set Up Name Choices and Variables
ExecuteGlobal("Dim name1, name2, value1, value2, correct_value")
'
' Create Possible Names
name1_choices = Array("Bob", "Dave", "Steve", "Joe")
name2_choices = Array("Alice", "Jane", "Mary", "Lisa")
value1_choices = Array(2,3,4,5)
value2_choices = Array(6,7,8,9)
'
' Pick a Randon Name for Each One
For i = 0 To Second(Time)
name1 = name1_choices( int(rnd(1)*4) )
name2 = name2_choices( int(rnd(1)*4) )
value1 = value1_choices( int(rnd(1)*4) )
value2 = value2_choices( int(rnd(1)*4) )
Next
'
' Set Correct Value
correct_value = value1 + value2

Next, go to the QUESTION/CHOICES tab. You can (if you want) go to the FULL EDITOR and replace the numbers using the INSERT DYNAMIC DATA button like I showed you previously when you did it for the names, or, you can just type it in. Either way the end result should look as follows:

<%name1%> has <%value1%> apples. <%name2%> has <%value2%> apples. How many apples do they have total?

Since we are changing the values, we also need to make the ‘correct answer‘ dynamic. To do this, click the CHOICES A-H tab, and change the correct answer from ‘3‘ to <%correct_value%>.

Our code will calculate the ‘correct-value’, and place it here.

Once again, click PREVIEW QUESTION and then COMPILED PREVIEW. Doing it several times will yield various names and values each time.

Including a Video With a Question in Test Pro Developer

In this tutorial I will be discussing how to add a video in a question with Test Pro Developer.  First create a Learning Mode w/ Advanced Report Test by clicking Create a New Test > Enterprise > Learning Mode w/ Advanced Report.  After your test is created we will need to add your video to the project.  Select your test and click the configure button.

Click the Other Resources tab, click the Open File Dependency Editor and click the Add button.

Navigate to the location of your video file and click Add.  Click OK, Close twice and Save Changes to return to the Develop Tests window.

Next, we will need to create the HTML document that the video will be embedded into.  If you are familiar with HTML, you can further customize the HTML document as desired.  For this example, I will keep it very simple.  Open Notepad and paste the code below.

<embed src="testVideo1.avi" loop="false" autoplay="false" width="360" height="240"></embed>

You will need to change the video name, width and height in the code to the properties of your video.

Save the file and name it what ever you would like with a file extension of .html (ex.  yourfilename.html).    Close the html file and Open Test Pro.

I will now add a question to our test by selecting the test and clicking the Add Question button.  Now click the Add a Question button in the questions area.

Then click the + sign on the Multiple Option Style Variations question type and select Multiple Option – On Form HTML Exhibit.

Enter your question/answers and click Next.  Test Pro will prompt you to add an html file for your question.  Navigate to the HTML file we just created, click OK then Done.

Now it is time to preview your question.  Select the question, click Edit Question > Preview Question > Complied Preview.  Your video will now appear in the question as shown below.

Changing the End of Test Report in Test Pro Developer

In this article, I will be customizing the End of Test Report in Test Pro Developer.  You will need to have knowledge of HTML or an HTML program like FrontPage or Dreamweaver.

Note: This customization is not for the Standard Legacy Report.  You can remove the Standard Legacy Report by clicking Configure and unchecking the Show Standard (Legacy) Report Upon Completion of the Test box.

First you will need to create a Learning Mode w/Advanced Report test (Create a New Test > Enterprise Tab > Learning Mode w/Advanced Report).  Then we need to add a dependency file (the banner image) by selecting on the test and clicking the Configure button.

Select the Other Resources tab and click the Open File Dependency Editor button.

Click Add File and navigate to your banner image.

After your file is added, click OK, Close, Close and Save Changes.  Now that our banner is included in the test, we want to modify our HTML report template.   To find the HTML report template follow the path below and open it in your HTML editor if desired. (you can open it in the text editor as well)

Note:  Your Application Data folder may be hidden.  To view this folder, click tools > Folder Options > View and select Show Hidden Files and Folders.

On Windows XP

C:\Documents and Settings\YOUR USER NAME\Application Data\Atrixware\Developer 8\Profiles\YOUR PROFILE NAME\Electronic\YOUR TEST NAME\aw-adv-report.txt

On Vista

Right-Click on your Desktop Shortcut and select Open File Location.  Click Profiles\YOUR PROFILE NAME\Electronic\YOUR TEST NAME\aw-adv-report.txt

Now I will link to my image by adding this line of code right below the <body> tag

<img src="banner.gif" />

Note: Replace banner.gif with the name of your banner image

I also want to remove the grey background, border and padding from the bold text by removing the style selected below.  I also want to add the text Your Results For before my test name.

Save your file after you have modified your report template to your liking.  Open Test Pro and go to your Develop Tests tab.  Right click on your test and select Compile & Run > Standard Test.  Once your test opens, click End to see your new report.  If your banner image is too wide for the default size of the test window (like the image below), you will need to make a few modifications.

First find the line of code below and remove it (View/Edit Test Level PowerScript)

Browser.Move main.left, main.top, main.Width, main.Height 

Now with your cursor still in the same spot, paste the code below.

(under this line: FileTemplate.AppendFile finalFile, reportOutput)

Change reportWidth(currently 830)/reportHeight(currently 600) number to your width/height in pixels and click save.

Change reportWidth(currently 830)/reportHeight(currently 600) number to your width/height in pixels and click save.

You can preview your test from the code window by clicking the button below.

Use Pooling in Test Pro Developer

In this article I will be discussing the use of rule scripts in Test Pro Developer.  The use of rules can be very helpful to select a number, type, weight etc. of questions in a test.  The most common rule used would be to select a certain number of questions from each category.    You also have a number of other rules you can use to filter your questions.  You can select the questions or the answers to contain specific text, by a script tag or by question weight.

I will start by creating a test that has multiple categories and varying score weights.  Now that the test is created, we can apply some Rule Scripts to it.  I want my test to contain 10 questions from the First Category, 15 from the Second Category and all questions from the Third Category.  To do this, select the test you are working with in the Develop Tests tab and click the Configure button.

Click the Question Configuration Tab and click the Select Questions with a Rules Script option box.  Click the Edit Script button then click the Open Wizard button.

Select 10 from the first drop down box, select the First Category from the second drop down menu and click Add and Continue.

The rule has been added so now we can continue to add the rules for the remaining two categories.  Once you have added your last rule click Add and Close.  Click Save then Save Changes.  I will run my test to make sure my rules have gone into effect by right-clicking on my test, selecting Compile and Run, then select Standard Test.

Answer a few questions then click End to bring up your report.  The report will tell you how many questions you got correct out of the total number of questions in each category.  This is how we will know that our rules are working properly.

So now that my rules are in place, I am going to make some modifications to them.  Select the test, click the Configure button and click the Question Configuration tab.  Click the Edit Script Button and click the Open Wizard button.  I want to have every question with a score weight of 9 to be included in the test.  Select All for the first drop down box, 9 for the last drop down box and click Add and Close.

I now want to change the Third Category to include only 1 question instead of all questions.  Click the Create Script Manually tab and you will see a list of the Rule Scripts we have added.  Find the Rule Script that says…

Rule
Match Category “Third Category”
Use All

and change it to…

Rule
Match Category “Third Category”
Use 1

Click Save then Save Changes

Placing Quizzes/Modules Across Multiple Tabs

In this article, I will be showing how to display quizzes across multiple tabs using placeholders in Weblearning 9.

Create a New Course,  give it a name and click the Layout & Design tab.

Click on Tab 1 and rename the Tab Caption to Quiz 1.  Change the heading text to Quiz One and remove [[[Placeholder for Quiz Modules]]].  Select everything in the course editor then copy (ctrl+c) and paste (ctrl+v) it into Tab 2 and Tab 3.  Change the Tab Captions and heading text to correspond with the quizzes you want to enter in.

Now we want to add our quizzes into the layout.  First, make sure that your quiz is added to your course.  Next, we need to get the slot number of the quiz we want to add.  To get the slot number, click your Modules tab and retrieve the numbers on the left to your quizzes.

Now we will add the Placeholder to each of our tabs.  Go back into the course layout (Course tab > Properties > Layout & Design > Tab 1)  and click in the editor where you would like to place the quiz link and click the Placeholders button.  Click Insert Placeholder for a Quiz/Module.

Click the correct slot number Placeholder and click Insert.  Now repeat the process for the remaining tabs and click Save Changes.

Now we want to preview the course layout to make sure everything works as intended.  Click the Courses tab > Portal.  Make sure you have a student added to login (Course > Admin Tools > Student Enrollments > Add Student).

The Online Trainer’s Checklist

The online trainer has to take into account many considerations. Proper preparation is vital to keeping your training running smoothly and your audience engaged.  Use this checklist to ensure that you are prepared for your next virtual classroom training event.

Materials Checklist -  well before the class start date.

Participants have been sent:

___  pre-work instructions

___  installation instructions for virtual classroom software

___  logistics such as links, passwords, and conference call information

___  contact information for questions

You and your co-trainers have the following materials ready:

___  slides and other files

___  instructor notes

___  activities and exercises

___  contingency plans

Technology Checklist – on day of class

___  computers and equipment have been checked and tested

___  computers have been re-booted

___  applications and necessary files are open, available, and ready

___ audio technologies such as telephones and microphones have been tested

___ all non-essential applications are closed

___  virtual classroom has been joined at least 30 minutes early

___  “sidekick” computers are logged into virtual classroom as participants

Trainer Checklist – on day of class

___ delivery area is ready (free of distractions, glass of water available, etc)

___ training materials are readily available

___  technology tools such as whiteboard and chat windows are enabled

___ phone number and contact information for IT support is available

Creating Animated Text in Menu Maker

It’s relatively simple to create some animated text using Menu Maker  (if you know the code). This short project should be a great starting point for you.First, open up Menu Maker, and create a new Blank Project (once you understand this concept, you can apply to your existing projects).

Add a Text Label component (keep the name as Label1), and then configure it (for this example) to CENTER alignment, font size of 16, SOLID background style (I chose BLACK as the color), and change the caption color to WHITE.

Resize the label component on the form to stretch the entire width (similar to my example below):

Now get to the GLOBAL CODE area (in the example here, I am using CD Menu Maker):

Click the CODE EDITOR button:

Enter in the following code:

Dim Start
Dim ScrollText
Dim ScrollTimer

Now go to the LOAD event of the form (as shown):

Enter in the following code:

Start = 0
ScrollText = “Enter the text you want to scroll here”
Set ScrollTimer = frmCanvas.Controls.Add(“PSA.AutoEvent”, “ScrollTimer”)
ScrollTimer.Interval = 250
ScrollTimer.RoutineToCall = “AnimateText”

Note the line of code that starts with “ScrollText =” defines the text that will be animated. Simply enter in the text you want inside the quotes.

You can also change the speed – the line that is ‘ScrollTimer.Interval = 250” is the code that defines the speed. A speed of 1 is the fastest, 1000 is 1 letter animated each second, up to 32,767 (which is agonizingly slow).

Now, click the button along the top of the code (where is says Sub On_frmCanvas_Load()), and choose “Add a New Sub, Function, or Class“:

For Name of Routine, enter AnimateText, then click OK:

Now enter the following code:

Start = Start + 1
If Start > Len(ScrollText) Then
ScrollTimer.Interval = 0
End If

Label1.Caption = left(ScrollText, Start)

Preview your project to see the animated text.