How to Create a Crossword Puzzle

Learn the steps on how you can create your own crossword puzzle!

 

 

Section 1: Planning

Approximate Crossword grid size in Claro

~22 inputs across x 13 inputs down (Without spaces)

 

Step 1: Create the hints/words that should be used within the crossword, a word shouldn’t be longer than the max input sizes above.

Step 2: Once hints/words are created, you can use an online crossword puzzle creator to get a basic layout of the crossword and move words around if needed to fit within the recommended grid size. OR, create your own crossword layout.

Tip: You can write out your crossword ideas on graph paper using a space that is 22 squares across by 13 down to help create the desired crossword layout.

 

Continue to Section 2 once you have the crossword layout/words/hints ready.

Section 2: Page Setup in Claro

Step 1: Create Project with 1 title page (optional), and 1 crossword page.  

Step 2: On the crossword page add the following elements:

-       One Submit button

-       Two Rich text areas – one for Hints and one for Notes.

-       Two Answer Key Buttons – one to show answer key markers and one to hide the answer key markers.

-       Insert 1 Text Input for each letter in each word (Insert > Input > Option 2 under Inputs) place/resize in Claro to match the planned crossword layout. (Move words if needed, to finalize the layout) *do not name inputs until section 3, and the crossword layout is finalized.
Use the following Input Options for all inputs:

o   Type: Text

o   Label: Option 1 (none)

o   Max Length: 1

-       One Answer Marker for each word Add the correct answer text for the corresponding word.

-       One Shape for each word fitting around the full word to indicate if the word is incorrect.

*You can create 1 input with the required options and duplicate it to save time.

 

Step 3: Create a new layer on the crossword page and add the following elements:

-       One Play Again button

-       One Exit button

-       One Retry button

-       Two Rich Text elements one for winning text, and one for try again text.

-       One Shape the size of the full page for the background. *Why is this needed? Once the result layer is shown this shape will block the user from being able to access the crossword inputs.

Section 3: Input Setup

Repeat Steps below for all inputs on the page.

Step 1: Rename the input based off the direction/word/letter.

Examples of naming in Covid crossword:

-       A1.1 = Across word 1 letter 1  

-       D1.1 = Down word 1 letter 1

-       AD1.1 = Across Word 1 letter 1 and Down word 1 letter 1 = 1 Input for 2 letters in the same position.

-       A1.1D2.1 = Across word 1 letter 1 and down word 2 letter 1 = 1 Input for 2 letters but not the same position.

 

Step 2: With input selected

-       Select Options 

-       Select Variable

-       Add New Variable use the same name as the corresponding input but remove the period between the word and letter. Ex A1.1 = A11, A1.2 = A12 Etc.

-       Select Ok

 

Step 3: Repeat Steps 1 and 2 for all inputs.

 

Accessibility Note: For Claro, Tab Order starts from bottom to top in the Layers panel. Words should be grouped together with the first letter of the word starting last in the layers panel.  *The Covid Crossword game is not made accessible, but tab order is considered. You can continue to add focus/alt text and duplicate elements to help with accessibility. 

 

Section 4: Input Actions - Hint Setup

Repeat Steps below for all inputs on the page.

Step 1: Select the corresponding Input and add a Swap action:

-       Select Interact

-       Select Actions

-       Under Hide and Show select Swap

-       Select the Hint text element as target

-       Select Set Content, add the corresponding question/clue for the letter of the word(s) that the input corresponds to. (If the letter belongs to 2 words, add both questions/hints)

-       Select No Effects

-       Select Apply

 

Step 2: Repeat Step 1 for all inputs on the page.

Section 5: Page Actions – Adding Correct Letter for each Input

Repeat Steps below for all inputs on the page.

 

Step 1: With nothing selected on the page:

-       Select Interact

-       Select Triggers

-       Under Variables select Is Changed

-       Find the variable for the corresponding input/letter you are working on in the dropdown (a11=a1.1, a12 =a1.2)

-       Under String put Is Equal to (==)

-       Value: Input the correct letter for that input.  

-       Select Next

-       Select functions and variables

-       Set Variable

-       Select Next

-       The side panel opens with the remaining options, next we will assign the Input to the corresponding word. Select the dropdown beside variable under the letter value input.

-       Select Add a new variable or select the corresponding word variable if the variable for that word is made already. If you are creating a new variable name the variable as follows: Aword1= Across Word 1, Aword2 = Across word 2, Dword1 = down word 1 etc.

-       Type: Number

-       Operator: +=

-       Value: 1

-       Select fire once per project

-       Select Apply

 

Step 2: Repeat Step 1 for all input variables.

Section 6: Submit Action Setup

 

Step 1: Add 1 action to hide the submit button when it is clicked.

Step 2:  Add 1 action to show incorrect results as a whole.

-       With the submit button selected, select Interact

-       Select Actions

-       Select Show

-       Select Next

-       Select the Try Again Text, and result background in targets

-       Effect: Fade

-       Trigger: When clicked

-       Conditions: type in each word variable and assign <= (less than or equal to)with the losing number of letters to each word.  {{Dword1}} <= 11 && {{Aword1}} <= 3 && {{Continue adding for ALL WORD VARIABLES}} (Example if down word 1 is 12 letters the losing number would be less than or equal to 11)

-       Select Set Hidden on Load

-       Select Apply

 

Step 3: Add 1 Action to show the retry button

-       With submit selected, select Interact

-       Select Actions

-       Select Show

-       Select Next

-       Select Retry Button in targets

-       Select Fade

-       Trigger When Clicked

-       Select Hidden on load

-       Select Apply

 

Step 4: Add 1 Action to hide the retry button if the user wins

-       With submit selected, select Interact

-       Select Actions

-       Select Hide

-       Select Next

-       Select Retry Button in targets

-       Select No effect

-       Trigger When Clicked

-       Conditions: type in each word variable and assign == (equal to) with the winning number of letters to each word.  {{Dword1}} == 12 && {{Aword1}} == 4 && {{Continue adding for ALL WORD VARIABLES}} (Example if down word 1 is 12 letters the winning number would be equal to 12)

-       Select Hidden on load

-       Select Apply

 

 

Step 5: Add 1 Action to show correct results if all words are correct.

-       With submit selected, select Interact

-       Select Actions

-       Select Show

-       Select Next

-       Select All the winning elements as targets (Winning text, exit button, play again)

-       Effect: Fade

-       Trigger: When clicked

-       Conditions: type in each word variable and assign == (equal to) with the winning number of letters to each word.  {{Dword1}} == 12 && {{Aword1}} == 4 && {{Continue adding for ALL WORD VARIABLES}} (Example if down word 1 is 12 letters the winning number would be equal to 12)

-       Select Hidden on load

-       Select Apply

 

Repeat steps below (Steps 6/7) for all Incorrect answers and to add Red Outline/Wrong indicators to each individual word.

Step 6:  Show Incorrect Red Outline around word if wrong answer is typed in

-       With submit selected, select Interact

-       Select Actions

-       Select Show

-       Select Next

-       Select the corresponding red outline, result background, try again text, and retry button in targets

-       Effect: Fade

-       Trigger: When clicked

-       Conditions: Type in the corresponding word variable and assign it <= (less than or equal to) with the losing number of letters for that word.  Ex: {{Dword1}} <= 11 (if the word has 12 letters in it)

-       Select Hidden on load

-       Select Apply

 

Step 7:  Show Incorrect Red Outline around word if answer is not typed in (null)

-       With submit selected, select Interact

-       Select Actions

-       Select Show

-       Select Next

-       Select the corresponding red outline, result background, try again text, and retry button in targets

-       Effect: Fade

-       Trigger: When clicked

-       Conditions: Type in the corresponding word variable and assign it == null this will indicate a wrong answer if nothing is typed in for that word.  Ex: {{Dword1}}==null

-       Select Hidden on load

-       Select Apply

 

Step 8: Repeat steps 6 and 7 for all incorrect answers/indicators of wrong answer for each word.

Section 7: Answer Key

Step 1a.1: Show Answer Key markers if the user answers wrong if the user is right the answer key marker will not show up, or use Step 1b method (no conditions).

-       With Show Answer Key Button selected, select Interact

-       Select Actions

-       Select Show

-       Select Next

-       Select corresponding Answer key marker for the word in targets

-       Effect: Fade

-       Trigger: When clicked

-       Conditions: Type in the corresponding word variable and assign it <= (less than or equal to) with the losing number of letters for that word. Ex: {{Dword1}}<=11 (if the word has 12 letters in it)

-       Select Hidden on load

-       Select Apply

 

Step 1a.2: Show Answer Key markers if the user answer is blank =null , or use Step 1b method (no conditions).

-       With Show Answer Key Button selected, select Interact

-       Select Actions

-       Select Show

-       Select Next

-       Select corresponding Answer key marker for the word in targets

-       Effect: Fade

-       Trigger: When clicked

-       Conditions: Type in the corresponding word variable and assign it ==null. ex {{Dword1}}==null

-       Select Hidden on load

-       Select Apply

 

 

Step 1a.3: Repeat steps 1a.1/1a.2 for each answer key marker, or use Step 1b method.

 

(or) Step 1b:  Show the answer key markers anytime if the user answers right or wrong markers will show with no conditions.

-       With Show Answer Key Button selected, select Interact

-       Select Actions

-       Select Show

-       Select Next

-       Select All Answer key in targets

-       Effect: Fade

-       Trigger: When clicked

-       Select Hidden on load

-       Select Apply

 

Step 2: Hide Answer Key Markers

-       Select Interact

-       Select actions

-       Select hide

-       Select all answer key markers as targets

-       Select set hidden on load

-       Select Apply

 

Step 3: Add 2 actions for when Show Answer key button is selected  1. Hide the Show Answer Key Button and 2. Show the Hide Answer Key Button (hidden on load selected)

  

Step 4: Add 2 actions when Hide Answer Key Button is selected 1. Hide the Hide Answer Key Button and 2. Show the Show Answer Key Button shows

Section 8: Play Again Action Setup

Step 1: Add a JavaScript action to Play Again Button (code resets the variables on the page)

-       With Play Again selected, select Interact

-       Select Actions

-       Select Player Controls

-       Select See more

-       Select Execute Java

-       JavaScript code to use: self.location.reload();

-       Select Apply

Section 9: Retry Button Action Setup

Step 1: Add action to Retry Button keeping variables intact.

-       With Retry selected, select Interact

-       Select Actions

-       Select Player Controls

-       Select See more

-       Function Reset current page

-       Select Apply

Section 10: Exit Button Action Setup

Step 1: Add action to Exit Button to close the course.

-       With Exit selected, select Interact

-       Select Actions

-       Select Player Controls

-       Select See more

-       Function: Exit the project

-       Select Apply

  0     0

Similar Projects

Questions  ( 0 )

Comments ( 1 )


  • 0
    Posted one month ago Brent Schlenker 100   |   4  
    This is fantastic! Thank you Laura!