2: Easy Generators

Easy Generators

An Easy Way to Generate HTML Content

Accordions

accordion

Use the tools provided to generate the HTML markup for an accordion, which can then be placed into the source code of your course page:

Form Method

Use the form below to generate an accordion for your course.

INPUT
OUTPUT

How It Works:

  1. Required: Insert a short description of your content in the Topic textbox.
  2. Required: Insert your content in the content textarea. Use pp tags to separate paragraphs of text.
  3. Click the Add button to add your new panel to the accordion in the output window.
  4. The code in the output window will be formatted according to the table below:
    Type Format
    window window
    open tag tag
    close tag tag
    attribute attribute
    attribute value attribute-value
    text text
    button button
  5. See something out of place in the the output window? You can edit it in place.
  6. Rinse and repeat for each panel you want to create.
  7. When you're done creating panels, copy the output window and paste it into the HTML of your course.
  8. Need to start over? Simply refresh this page and try again.

Code Method

Use the input and output windows below to generate an accordion for your course.

INPUT
OUTPUT

How It Works:

  1. Required: Change the value of the topic attribute in the input window to a short description of your content.
  2. Required: Replace the text between the panelpanel tags with your content. Use the pp tags to separate paragraphs of text. When done editing the text, click outside the input window to see the formatting results according to the table below:
    Type Format
    window window
    open tag tag
    close tag tag
    attribute attribute
    attribute value attribute-value
    text text
    button button
  3. Click the Add button to add your new panel to the accordion in the output window.
  4. See something out of place in the the output window? You can edit it in place.
  5. Rinse and repeat for each panel you want to create.
  6. When you're done creating panels, copy the output window and paste it into the HTML of your course.
  7. Need to start over? Simply refresh this page and try again.

Transcripts

transcript

Use the tools provided to generate the HTML markup for a transcript, which can then be placed into the source code of your course page:

Line Method

Use the form below to generate a transcript one line at a time.

INPUT
:
OUTPUT

How It Works:

  1. Required: Insert minutes in the MM textbox and seconds in the SS textbox. Only digits are allowed in the MM and SS textboxes, and both fiels are required. For times less than 1 minute (00:00–00:59), be sure to put 0 or 00 in the MM textbox.
  2. Required: Insert transcript text in the Transcript textarea.
  3. Optional: Insert the name of the person(s) speaking in the Person textbox.
  4. Optional: Insert any noise(s) made in the Noise textbox.
  5. Click the Add button to add your new trans entry to the transcript in the output window.
  6. The code in the output window will be formatted according to the table below:
    Type Format
    window window
    open tag tag
    close tag tag
    attribute attribute
    attribute value attribute-value
    text text
    button button
  7. See something out of place in the output window? You can edit it in place.
  8. Rinse and repeat for each trans entry you want to create.
  9. When done, copy the output window and paste it into the HTML of your course below its corresponding media object.
  10. Need to start over? Simply refresh this page and try again.

Batch Method

Use the form below to generate a transcript in batch.

This batch transcript processor is ideal for converting YouTube transcripts into the proper transcript format, but do note that person tags, which are used to identify speakers, will be excluded in the output window unless added in manually using the format %Person%. Additionally, any instance of >> to indicate a speaker shift will be replaced with -- in the output window. To exclude speaker shifts altogether from your output results, be sure to remove all instance of >> before conversion. INPUT
OUTPUT

How It Works:

  1. Required: Insert the transcript text into the Transcript textarea. Transcripts that are copied-and-pasted directly from YouTube may produce varying results. These transcripts will always contain time tags for timing, noise tags for background noises (if applicable), and span tags with transcripted text but may or may not include person tags to indicate speakers. Different transcripting patterns have been accounted for as best as possible. Additionally, any instance of >> to indicate a speaker shift will be replaced with empty personperson tags. Make sure all timing values are placed at the beginning of each line in the format of 0:00 or 00:00 for best results. For further information regarding output formatting, to add in speakers or noises, or to replace speaker shifts with persons, refer to the formatting guide below, which will further explain how input patterns will be converted into HTML in the OUTPUT window:
    Type Input Output
    time 00:00 time00:00time
    speaker shift >> personperson
    noise [NOISE] or (NOISE) noise[NOISE]noise
    person %Person% or Person: personPersonperson
    transcript transcript text spantranscript textspan
  2. Click the Add button to add a set of trans entries to the transcript in the output window.
  3. The code in the output window will be formatted according to the table below:
    Type Format
    window window
    open tag tag
    close tag tag
    attribute attribute
    attribute value attribute-value
    text text
    button button
  4. See something out of place in the output window? You can edit it in place.
  5. Rinse and repeat for each set of trans entries you want to create.
  6. When done, copy the output window and paste it into the HTML of your course below its multimedia.
  7. Need to start over? Simply refresh this page and try again.

Boxes

boxes

Use the tools provided to generate the HTML markup for boxes, which can then be placed into the source code of your course page:

Form Method

Use the form below to generate boxes for your course.

INPUT
OUTPUT

How It Works:

  1. Required: Insert your text content in the Content textarea.
  2. Optional: Insert a header and/or subheader in the header and subheader textboxes, respectively.
  3. Optional: Insert an eCon name or the source address to an icon or image in the image textbox. eCons are a set of Standard eCore Icons. Refer to the Icons section of the template guide for a complete list of eCons available to you.
  4. Optional: Specify a fitment, or size, for your icon or image in the fit textbox. The fit attribute will only take effect when an image attribute is also present. Not sure what to put here? Refer to the Features section of the template guide for a list of acceptable values for the fit attribute of the box tag.
  5. Optional: Select a heading level from the Level dropdown menu.
  6. Optional: Select a shape and/or position from the Shape and/or Postion dropdown menus, respectively. The shape and position attributes will only take effect when an image attribute is also present. Not sure what to put here? Refer to the Features section of the template guide for a list of acceptable values for the shape and position attributes of the box tag.
  7. Optional: Select a horizontal alignment for the content text within your box from the align dropdown menu. Not sure what to put here? Refer to the Features section of the template guide for a list of acceptable values for the align attribute of the box tag.
  8. The code in the output window will be formatted according to the table below:
    Type Format
    window window
    open tag tag
    close tag tag
    attribute attribute
    attribute value attribute-value
    text text
    button button
  9. See something out of place in the the output window? You can edit it in place.
  10. Rinse and repeat for each box you want to create.
  11. When you're done creating boxes, copy the output window and paste it into the HTML of your course.
  12. Need to start over? Simply refresh this page and try again.

Multimedia

multimedia

Use the tools provided to generate the HTML markup for a multimedia, which can then be placed into the source code of your course page:

Form Method

Use the form below to generate a multimedia for your course.

The following generator contains a transcript input box for easily setting up transcripts inside multimedia containers. For adding a transcript in the transcript input box, be sure to use one of the Transcript Generators above to generate the correct transcript markup. Then, simply copy and paste the markup from the Transcript Generator's output window into the transcript input box below. INPUT
Position 
Media
Transcript
 OUTPUT

How It Works:

  1. Required: Insert the HTML markup for a media object in the Media input box.
  2. Optional: Insert an eCon name or the source address to an icon or image in the image textbox. eCons are a set of Standard eCore Icons. Refer to the Icons section of the template guide for a complete list of eCons available to you.
  3. Optional: Insert a description of the media in the description textbox, or use the description textbox to provide a set of instructions for your students.
  4. Optional: Specify a position for your description using the Top and Bottom radio buttons. The position of the description is relative to the media tag. Selecting the top option will position the description tag above the media tag. Selecting the bottom option will position the description tag below the media tag.
  5. Optional: Select a horizontal alignment for the content text within your description from the align dropdown menu. Not sure what to put here? Refer to the Features section of the template guide for a list of acceptable values for the align attribute of the description tag.
  6. The code in the output window, media input box, and transcript input box will be formatted according to the table below:
    Type Format
    window window
    open tag tag
    close tag tag
    attribute attribute
    attribute value attribute-value
    text text
    button button
  7. See something out of place in the the output window? You can edit it in place.
  8. Rinse and repeat for each multimedia you want to create.
  9. When you're done creating multimedia, copy the output window and paste it into the HTML of your course.
  10. Need to start over? Simply refresh this page and try again.