# Word Problem Widget

## Introduction

LodeStar Web Journal entries emphasize the importance of practice and immediate feedback.  The Word Problem widget helps you put that general tenet into practice. With the Word Problem Widget, you can construct a word problem with both sentences and variables.  You define a variable, such as {principle} and fill in details about how large a number can be randomly assigned to this variable. The variable is used in an expression (formula) that calculates the correct answer and matches it against the student’s submitted answer.

All of this is difficult to understand in the abstract.  We’ll make this concrete.

For example, you enter the following word problem:

John Smith opens a savings account with a {rate}% interest rate, compounded annually. How much will his account be worth in {time} years after he makes this one-time deposit of  ${pv}. The variables in the above word problem are {rate}, {time} and {pv}. Note that variables are surround by curly braces {}. Variables cannot begin with numbers; they are case sensitive; and they must be one word. In the widget, you define the range that can be used for each of these variables. {rate} might be a decimal number ranging from .01 to .05. {time} might an integer (a whole number) from 1 to 10 years. {pv} might be 1000 to 10000. The expression is: pv * (1 + rate)**time Where, * is the multiplication operator ( ) controls order of precedence ** is the exponent operator One student might see: John Smith opens a savings account with a 0.01% interest rate, compounded annually. How much will his account be worth in 8 years after he makes this one-time deposit of$1545.

The next student might see:

John Smith opens a savings account with a 0.05% interest rate, compounded annually. How much will his account be worth in 5 years after he makes this one-time deposit of  $1000. We’ll cover how to do this step by step. ## Getting Started STEP ONE Start with a Text Page. Place your cursor somewhere on the Text page and then select the black sprocket from the HTML Editor Tool Bar. STEP TWO Select a widget type. For the purposes of this article, I’ll choose the Word Problem Widget. Widget Menu STEP THREE Type in the word problem. John Smith opens a savings account with a {rate}% interest rate, compounded annually. How much will his account be worth in {time} years after he makes this one-time deposit of${pv}.

The words John Smith will never change.  They are constants. {rate} will be replaced with a value in the range that you specify.

Word Problem Widget Dialog

Assign this word problem a number of points by filling in the Point Value at the top right.

STEP FOUR

Type in one of the variables that you used in the ‘Variable’ field.  Our first variable is ‘rate’. Give rate a min value of .01 and a max value of .05.  Rate is not an integer. Select ‘no’ for the Integer field. Rate needs a precision of two decimal places.

Click on the ‘+’ button to add more variables.

STEP FIVE

Type  the expression in the expression field.  There is only one expression per question.

Type in the following:

PV * (1 + rate)**time

That reads PV times 1 + rate raised to the power of time.

Here are the most common operators, which follow W3C standards for JavaScript operators:

( )     Expression grouping     (3 + 4)

!     Logical not     !(x==y)

**     Exponentiation     10 ** 2

*     Multiplication     10 * 5

/     Division     10 / 5

%     Modulo division     10 % 5

–      Subtraction     10 – 5

STEP SIX

Once you have added as many variables as you need, click on the ‘Ok’ button.

After you click on ‘Ok’, you will see a placeholder for the widget activity. The placeholder will always be some content surrounded by a round-cornered border.

Author’s view of the Word Problem Widget

This is not what the student will see. You must click on the ‘Preview’ button at the top left to see the widget converted into a word problem.

Student view of a Word Problem.

You can add as many widgets to a page as you wish.

Conclusion

This Widget allows you to present a word problem with values substituted for variable names.  Once the student submits the answer to the problem, the Widget evaluates the answer with the help of the expression that you designed.

Each time the student refreshes the browser page, s/he will be presented with a different problem.  Problems will also vary between students.

The Word Problem widget enables you to support student practice with math problems and provide immediate feedback.  Early activities can be simpler to solve. Later items can be more challenging.

# Math Equations

## Introduction

Creating math equations for use in eLearning is tricky.  In the past, instructors used editors that helped them construct equations only to export them as images.   In the past, there were no standards that browsers could follow to display math equations properly.  Browsers, however, could reliably display images.  Therefore equation editors produced images.

## LaTeX

Some savvy mathematics and science instructors used a markup language called LaTeX (pronounced Latek).  LaTeX was based on the TeX typesetting language.  LaTeX supports the typesetting and display of mathematics.  LaTeX equations are constructed with a simple but specialized language.

Here is an example of the quadratic equation:

\frac{-b\pm\sqrt{b^2-4ac}}{2a}

Which produces the following, when supported by some helper code:

LaTeX looks complicated, but it is not.  \frac{numerator}{denominator} produces a fraction with a fraction bar.

The numerator has the term -b followed by a plus and minus symbol denoted by \pm.

\sqrt{} produces a square root.  The ^ produces an exponent.  And so forth.

Unfortunately, LaTeX is not accessible.  Most screen readers can’t read a LaTeX equation.  Therefore visually impaired students won’t ‘perceive’ the equation.

LaTeX should not be discounted, however.  It can still play a very important role in support of the preferred markup language: MathML.

## MathML

MathML is powerful and accessible.  Equations marked up in MathML can be displayed in most modern browsers.

LodeStar supports MathML.

The trick is in finding the right math editor to construct MathML.  There are several math editor options.    The one we like to configure in LodeStar is http://hostmath.com/  but there is one important caveat.  The editor is surrounded by ads.  One can easily inadvertently click on an ad while editing an equation.

Hostmath in LodeStar  loads quickly.  If you know LaTeX, you can quickly construct an equation or can use the math palette on the left.  Once an equation is constructed, pick the MathML version.

This produces

MathML is xml markup.  That means that it is highly structured so that it can be parsed (interpreted) and presented.  You must include the $tag and the$ end tag.  They are  book ends.  Instructors must copy and paste the book ends along with all of the code in between.

You paste  the MathML code into LodeStar with the help of the <> tool in the LodeStar  HTML editor.

All embed code can be inserted with the help of the <> tool.

Important Note: MathMl will not render perfectly in the LodeStar HTML Editor.  You must preview the equation in the Firefox browser.  When you preview within LodeStar, a copy of the project address gets saved to the clipboard.  Paste this address into the FireFox browser address field.  You only need Firefox when you are authoring.  Your students won’t need Firefox.  Your students will see a perfectly rendered equation.

## MyScript

For those who don’t know LaTeX or don’t have the patience to work the palette of symbols,  MyScript will be a godsend. MyScript will not load in LodeStar but can be used separately and it will produce MathML code that you can paste into LodeStar:

http://webdemo.myscript.com/views/math.html#

You simply hand write your equation and then click on MathML on the right to produce the code.  Paste the code in LodeStar using:

The reason why MathMl is so important is that it works without a plug-in in all modern browsers.

## Configuring LodeStar with a Math Editor

STEP ONE

Select Tools > Math Editor Option.  Paste in http://hostmath.com/ or your favorite editor.

STEP TWO

To quickly access the editor, select Help > Online Math Editor.  The editor will appear in a separate tab.  You can then construct your equation and display the MathML code.

STEP THREE

Copy the MathML code to the clipboard and then embed it on the Text Page by selecting the <> embed tool and pasting in all of the code.

STEP FOUR

Again, please understand that it will not render well on the LodeStar page.  It will render well to students.  To confirm this, click on Preview.   Preview will save the address of the project on the clipboard.  Paste this into a Firefox browser address field.  Again, your students won’t need Firefox.  This browser is only needed to preview projects locally before they are uploaded to a learning management system.

## Conclusion:

Here is what the Quadratic formula looks like in MathML in LodeStar:

The equation is mangled.  However, here is what it looks like in Firefox.  This is what the students will see in any modern browser, once the project has been exported to a learning management system:

# Drag and Drop Widget

Introduction

The Drag and Drop widget can be inserted nearly anywhere on the ActivityMaker Mobile Text Page.

The Drag and Drop Widget allows you to create both categories and items to be categorized.  LodeStar converts each item into a drag-able tile and converts each unique category into a drop target area.  If two items share the same category, only one target area will be created.  All items are initially placed in the un-categorized area.   Students  drag items to their matching categories. They can drag items with their mouse or finger or they can use the keyboard.

Getting Started

STEP ONE

Start with a Text Page. Place your cursor somewhere on the Text page and then select the black sprocket     from the HTML Editor Tool Bar.

STEP TWO

Select a widget type. For the purposes of this article, I’ll choose the Drag and Drop Widget.

Screenshot of the LodeStar Widget Menu

STEP THREE

Type in an item.  Type in the category to which the item belongs.  For example the item ‘Mollusk’ may match the category ‘Animal’.  (Categories are case-sensitive.  Entries in the category field of ‘animal’ and ‘Animal’ will create two category target areas for the student.)

Type in feedback that provides information to the student about why the item belongs in the category.  All of this information will also be view-able from the transcript.

Drag and Drop Widget Dialog

STEP FOUR

Click on the ‘+’ button to add more items and categories. Check the ‘Randomize’ checkbox to randomize the display order of the items.

STEP FIVE

Add more items.  Be mindful, however, that too long of a list makes the activity clumsy for students with small screen dimensions.

STEP SIX

Once you have added as items and categories as you need, click on the ‘Ok’ button.

After you click on ‘Ok’, you will see a placeholder for the widget activity. The placeholder will always be some content surrounded by a round-cornered border.

Author view of the Drag and Drop Widget

This is not what the student will see. You must click on the ‘Preview’ button at the top left to see the widget converted into drag and drop areas.

Student view of the Drag and Drop Activity

You can add as many widgets to a page as you wish.

Conclusion

The Drag and Drop widget enables you to support student concept learning.  Early activities can be simpler to solve with black and white distinctions between items.  Later items can be more challenging with murky gray areas that make it difficult to categorize items.

# Image Slider Widget

Introduction

The Image Slider widget can be inserted nearly anywhere on the ActivityMaker Mobile Text Page.

The  Image Slider allows you to insert a series of images on a page that are view-able through a carousel-like viewer. That means that your students can click on arrows to view the images or, on a mobile device, swipe to advance or turn back the images.  A simple option allows you to include thumbnail images and a slide transition.

Getting Started

STEP ONE

Start with a Text Page. Place your cursor somewhere on the Text page and then select the black sprocket     from the HTML Editor Tool Bar.

HTML Editor featuring the Widget Tool.

STEP TWO

Select a widget type. For the purposes of this article, I’ll choose the Image Slider Widget.

STEP THREE

Click on the image field.  A file requester will appear.  Browse to the image of your choice and double-click on the image to add it to the image slider.  LodeStar will make a copy of the original and place it inside your project.

Image Field

STEP FOUR

Add a caption below the image.  Click on the ‘+’ button to add more images.

STEP FIVE

Add as many images as you wish, and then check the ‘Display List” box if you want thumbnails of the image to appear either alongside (if there is enough screen space) or below.  Check ‘Slide Transition’ if you want a transition effect (i.e. a slide) to accompany the display of images.

STEP SIX

Once you have added as many images with captions as you wish, click on the ‘Ok’ button. (Be mindful that too many images of large sizes may result in slow download times.)

After you click on ‘Ok’, you will see a placeholder for the widget activity. The placeholder will always be some content surrounded by a round-cornered border.

Image Slider viewed by author

This is not what the student will see. You must click on the Preview button at the top left to see the widget converted into an image carousel.

Image Slider viewed by student

You can add as many widgets to a page as you wish.

Conclusion

The Image Slider widget enables you to combine imagery with text and other widgets. The Image Slider gives students a convenient way to view images without scrolling endlessly.

Introduction

The Short Answer widget can be inserted nearly anywhere on the ActivityMaker Mobile Text Page.

The main advantage of the Short Answer Widget is that it allows you to anticipate incorrect answers and provide feedback.  For example, ‘Toronto’ is a common wrong answer to the question of ‘What is the capital city of Canada?”.

For the anticipated wrong answer, you provide specific feedback.  For the above example, corrective feedback might be “Incorrect.  Toronto is the capital city of Ontario.  It hosts provincial parliament buildings in Queens Park.”

Getting Started

STEP ONE

Start with a Text Page. Place your cursor somewhere on the Text page and then select the black sprocket     from the HTML Editor Tool Bar.

STEP TWO

Widget Dialog Box.

STEP THREE

In the top right field, type in how many points your question is worth. For example, 5.
In the HTML editor, type in the question or question stem.

A screenshot of LodeStar’s Short Answer Widget Dialog Box

STEP FOUR

Fill in the answer field with the correct answer. Select ‘yes’ to mark this answer as correct. Select ‘no’ if it is not. Fill in feedback that matches this distractor/option.

STEP FIVE

STEP SIX

Once you have added as many answers with feedback as you wish, click on the ‘Ok’ button.

After you click on ‘Ok’, you will see a placeholder for the widget activity. The placeholder will always be some content surrounded by a round-cornered border.

Placeholder for a short answer question from the instructor’s point of view.

This is not what the student will see. You must click on the Preview button at the top left to see the widget converted into an activity.