Free Demo
1.866.696.8709
Atrixware May 2008 - Atrixware
learning management system
Axis LMS
Ready to Enhance and Streamline YOUR Training?
Works on Windows, MacOS, iPad, iPhone & Android
FREE DEMO

Archive for May, 2008

CSS for Quiz Templates Explained Part 2

In this tutorial, I will be explaining how to modify the CSS properties for the selectors discussed in the previous article.

All colors in CSS are referred to using Hexadecimal format ex. #FFFFFF.  Most image editing software will provide Hexadecimal values when a color is chosen.  If you do not have image editing software, you may want to download a color picker to choose or get the color value from an image (You will find several pickers if you search Google for “free color picker”).  To learn about CSS syntax and terminology to help complete this exercise, visit this link http://www.w3schools.com/Css/css_syntax.asp

Start by creating a quiz, put the quiz into a course and add a student.  Now upload a logo to Weblearning (Files>Browse>Upload File).   Click the Modules tab > Properties and select your logo from the banner drop down box. My logo has a background-color of #EAEAEA so I will change the background-color of the quiz template to match.  Click the Modules tab > Properties > Advanced Settings tab, locate the Extra CSS input field

blog45.jpg

Paste the following.

body{    

background-color:#EAEAEA;    

}    

Thats it!  Just replace your background-color with the hexadecimal value desired and click Submit Changes.

blog41.jpg

Navigate back to the Extra CSS input field.  Now change the background color of the content area to white.  Paste the following below the code already entered.

#content{    

background-color:#FFFFFF;    

}

blog44.jpg

If you preview your quiz, (Courses tab > Portal) you will notice that some of the borders are white and may not show up well on the new background.  To change the top and bottom border color and style, paste the following.

#header_bar{    

border-style:solid;    

border-color:#333333;    

border-width:1px;   

}    

#navbar{
border-top:0px;
}

blog43.jpg
The border of #header_bar will appear solid, grey and 1px wide.  The top border of #navbar will not be visible because its width is 0 px.  You can add as many CSS properties for a selector (ex. #header_bar) as you would like but each line must end in semicolon as shown above.

The last item I will change is the color of the question font and size.  Paste the following code

.tp_question {    

font-family:Verdana, sans-serif;    

font-size: 16pt;    

color:#000066;    

}    

blog42.jpg

Click Submit Changes and preview your quiz template customizations.  Your new template should look something like below

blog48.jpg

If you would like to make other changes, you can visit http://www.w3schools.com/css/css_reference.asp to review all css properties and descriptions

If you enjoyed this article please consider staying updated via RSS.

Creating a Survey in BasicSurvey

In this article, I will be discussing how to create a survey in Basic Survey.  Start by logging into your BasicSurvey account and click Get Started Now: Create Your First Survey

blog36.jpg 

Creating a survey is broken down into 5 steps listed below.

1.  Create Questions

2.  Setup Survey (Look and Feel)

3.  Create the Survey

4.  Taking the Survey

5.  Turn on Email Reporting

Step 1 – Create Questions

Begin by clicking Create Questions or Add Questions on the left. 

 blog35.jpg

Select the answer set you would like to use then enter your question

 blog34.jpg

Give the question a category (or select from a list of categories) and click Add Question

 blog33.jpg

Repeat this process until you are satisfied with your question list.   

Step 2  - Setup Survey (Look and Feel)

Click Look & Feel on the left and select the appropriate choices. 

blog37.jpg 

For this example, I will leave the default settings as is and click Submit Changes

Step 3 – Create the Survey

Select Create Survey on the left and click the Create Survey link. 

 blog32.jpg

Click Create – this is a new survey and enter a name.  Select the number of questions from each category and click Publish Survey

Step 4 – Taking the Survey

Click the Survey tab and you will see a list of your published surveys.  Click the Links and click the “Click  here to try the link” to take your survey

blog38.jpg

Step 5 – Turn on email reporting for the surveys

Click the Account tab and select Response Report from the Email Responses drop down box.

blog39.jpg

Note:  All survey responses will be sent to the email address listed under the Account tab

If you enjoyed this article please consider staying updated via RSS.

CSS for Quiz Templates Explained Part 1

In this article, I will be discussing what each css name will modify for quiz templates in Weblearning 9. I will also note some property modifications that would be commonly used. In Part 2, I will be discussing how to make these changes using CSS properties.

What is CSS?

CSS will allow you to “style” web pages. (change font color, size, background color etc.) Since Weblearning is a web application, the same principles will apply for customizing quiz templates. Each template already has CSS applied to it giving it a look and feel. If you want to modify a template for example to change the color scheme to match company colors, you would override the current CSS with your own in the Weblearning Control Panel (discussed in Part 2).

CSS Syntax

Here is a basic outline of how the code should be formatted with an example

Terminology

selector {

property:value;

}

Example

body{

color:#FFFFFF;

}

CSS Template names and descriptions

Note: Sections highlighted in red represent what the name (class or id) will control.

css_resized7.jpg

.navbutton: the next, back and end buttons on the bottom of the template. Common Modification: Change the width, height, font or color

css_resized9.jpg

.q_essaytext: essay style question text. Common Modification: Change the font size, font color or background color

.q_fibtext: fill in the blank style question text. Common Modification: Change the font size, font color or background color

.q_picklist: the picklist question style. Common Modification: Change the width, font size, font color or background color

.q_matching_text: the matching question style. Common Modification: Change the width, font size, font color or background color

.q_matching_picklist: the matching picklist question style. Common Modification: Change the width, font size, font color or background color

.q_title_bar: the question title bar. By default will display the question number. Common Modification: Making it invisible, modifying the font, color, height and width

css_resized5.jpg

.tp_body: this style will apply as a default for everything inside of the template if there is no style defined. Common Modification: background color and default font

css_resized1.jpg

.tp_choiceb: question answers. Common Modification: font, size and color

css_resized8.jpg

.tp_question: the question text. Common Modification: font, size and color

css_resized4.jpg

#content: box that holds the question title bar, the question and answers. Common Modification: background color, background image and border

css_resized3.jpg

#header_bar: holds the timer and the quiz title. Common Modification: background color and border

css_resized6.jpg

#navbar: holds the navigation buttons at the bottom. Common Modification: background color and border

css_resized2.jpg

#logo_container: holds the logo image at the top of the template. Common Modification: Align to left, right or center

css_resized101.jpg

If you enjoyed this article please consider staying updated via RSS.

Insert a Flash Button in Menu Maker

In this article, I will be discussing how to add a Flash button into your Menu Maker project.  I will be using a button that is included in the Flash library.  However, you will not need to own a copy or know how to use Flash to include a Flash button.  There are many places online to download, create and customize your own buttons.

Click Here to download the button that I will be using if you would like to follow along.

Open Menu Maker and Create a New Project.  The first step is to add the Flash button to the project.  Click Project > Add/Remove Project Files in the Project Menu.

1.jpg

Click Add File or Resource and browse your file system to locate your button.

2.jpg

Click OK then Done to return to the Design Environment.  In the Add Components panel click the Video Component button, give it a name and click OK.  Click Pick, select the Flash button, un-check the Show Control Button and click OK.

3.jpg

Click Preview in the Project Toolbar to make sure the Flash button appears.  You will notice that the button takes on the size of the Video component.

4.jpg

Close out the Preview window and return to the Design Environment.  Resize the Video component by dragging the size handle or right clicking on it in the Component Explorer and selecting Advanced Properties.   Once the component is sized appropriately, you can add Actions to the click event, duplicate the component etc.

If you enjoyed this article please consider staying updated via RSS.

Animate with Easing in Menu Maker

In this tutorial I will be discussing how to animate a component in Menu Maker.

Easing will create a more realistic looking animation as if the object was reacting to the forces of gravity.  Click here if you would like to look at an example of a ball bouncing with and without easing.

There are a few main concepts that you will need to understand before we start.

1.  The animation will be time based so we will need to set the EventTimer to fire 20 times per second to get smooth motion.

2.  A number will need to be updated to add/subtract a certain amount to move the image position every time the EventTimer is fired.  (This will create an animation without easing)

3.  An equation will be defined to have the image pick up/loose speed by multiplying or dividing the position.  (This will add easing to our animation)

Now that the theory is out of the way, we can get started.  The first thing to do is add an image component and name it Image1.

Step 1: Setting the Initial Left Position of the Image

Once your image is on the Canvas, move it to a position on the right side.  Now get the Left position of the image.  Right click on the image component in the Component Explorer, select Advanced Properties and remember the left coordinate

img1.jpg

This number will be the starting left point for the animation.  Next click on the Canvas, click Events >  select {Global Code} > click the Code Editor button.

globa.jpg

Now create the variable that will hold the left position value.  Paste the code below and change the left position number to left coordinate that was retrieved above.

 

dim leftPosition 

leftPosition = 500

global2.jpg

Step 2:  Setting the EventTimer

The event timer will have to be set when the application starts to determine how may times it will fire in milliseconds (entering a value of 1000 will fire every second).  Select the frmCanvas, right-click and select On_frmCanvas_Load to open the code editor.  I want my animation to fire 20 times per second so I will enter the following:
frmCanvas.EventTimer.Interval = 50
load.jpg

Step 3:  Moving the Image Position

Now that the EventTimer is set, I will need to decrement the leftPosition variable by 1 every time it is fired (20 times per second).  Select the frmCanvas, right-click and select On_frmCanvas_EventTimer to open the code editor.

eventtimer1.jpg

You can simply put the following to move the image across the Canvas no easing.

 

leftPosition = leftPosition - 1 

Image1.Left = leftPosition 

However, the image will continue to move without a stopping point.  To stop the image at 10, you will need to say…

If leftPosition > 10 Then 

leftPosition = leftPosition - 1 

Image1.Left = leftPosition 

End If

Once the image position is less than 10, the leftPosition variable will not decrement anymore and the animation will stop.  Preview your project to make sure the animation works properly.

Step 4:  Adding Easing

Now that the image is animating across the canvas, we will just need to make a slight modification to the code above.  Right now there is an image that moves to the left 1 pixel 20 times per second and stops when it is < 10.   Now the image needs to start off moving fast and slow down as it nears 10.  This is done by multiplying the leftPosition by a decimal value of .85.  The decimal value will determine how fast the image will move across the canvas.  (The lower the value, the faster the animation)  Delete any existing code and paste the code below:

If leftPosition &gt; 10 Then 

leftPosition = (leftPosition - 1) * .85 

Image1.Left = leftPosition 

Image1.Refresh 

End If

eventtimer.jpg

Preview your project to confirm the image animates with easing.  If you would like to view the finished animation, you can download it here: easing.zip

If you enjoyed this article please consider staying updated via RSS.

A Better, Easier & Less Expensive Learning Management System
Try the Atrixware Axis LMS