Interoperable interactive geometry for Europe
I forgot my login data
Register


Report a bug


Fan club

Quick Intro Videos
click to start movie
Create A Simple
GeoGebra Resource (25Mb)
click to start movie
Filing a review
click to start movie
Find a Resource

SPONSORS
This platform is brought to you by the intergeo project, funded under the eContent Plus programme of the European commission and by partners

GAWLP Phase II Documentation

How to create a Landing Page using the Phase II configurable features

In order to achieve the desired flexibility of design, all features were created as JavaScript. To configure a page, follow these steps:

Step 1: Create the page on Curriki

Step 2: Insert the macro call:

#includeMacros("AdWordsJump.TemplateJs")


Step 3: Select which features you’d like to include from the configuration options below. For each feature, make sure to define:

  • type
  • id
  • value (if default text should appear)
  • any additional html parameters to make the feature look/act the way you want (see for example the emailCheck feature)
Step 4: Select the appropriate button based on the features included and define the following:
  • type
  • id
  • value
Step 5: Insert the JS statement and edit the features included so that there is 1 line per ID called above; make sure the text within ‘’ after the colon on each line matches the ID for the feature called above. If for any reason you use a feature 2x within the same page, make sure to give them unique IDs.

<script type="text/javascript" language="javascript">
    new AdWordJumpPage({
        searchText:'searchText',
        searchTextWrapper:'searchTextWrapper',
        emailCheck:'emailCheck',
        emailCheckWrapper:'emailCheckWrapper',
        email:'email',
        emailWrapper:'emailWrapper',
        autoDecideButton:'autoDecideButton'
    });
</script>

If you see a message that says a field is missing when you save out of Edit mode, double check your code. Most likely something is missing (i.e. a comma in the script) or the features are not intended to work in combination with each other.

Step 6: Style the page around your features as needed.

Styling notes:

  • You can use any style by yourself with the html element attribute class and style, for example
    <input type='...' id='...' class='...' style='...'>
    for instance, you can change basic buttons to the Curriki orange ones by adding in class="button button-orange" (for 1.8.6 release on prod) or class="button-orange" (for 1.8.7 on current/prod)
  • If you set the ‘value’ attribute of ‘input’ field, it will be processed as default value for that field.
  • Make sure to style while viewing in XPage format (add “?xpage=popup” to the URL)
  • If using macros from Registration page, make sure to call the global style sheet
  • Someone who is aware of how a macro works and what style tags are used can overwrite the styles in the macro by calling/editing them at the top of the page where the macro is used

Step 7: Verify the new page has been added to the log and is storing entries correctly.

Feature Configuration Options

valuedescriptioncode example
subjectParentThe top level subject to search within; when used this filter will be set in Advanced Search upon submitting the form
<input id='subjectParent' type='hidden' value='...'>
subjectThe topic or sub-subject to search within; when used this filter will be set in Advanced Search upon submitting the form
<input id='subject' type='hidden' value='...'>
searchTextInserts an empty search field into the page; should be a text field.
The value attribute has been suppressed on this feature because it was causing a bug (defining a value attribute caused any user-entered text to become the value after refreshing the page); use defaultSearchText instead to define a default value.
No validation on this field; to set validation, use allowEmptySearchText.
<input id='searchText' type='text'>
defaultSearchTextInserts default text into the searchText field. This feature is used to replace the value attribute of searchText because in the old version of that feature, if a user enters some text in the field and refreshes the page, the user-entered text will be regarded as the default value. This option will resolve this problem.Add this statement to the JS script (no need for an input line with the other html elements):
defaultSearchText:'Enter your search term',
searchTextWrapperInserts the red highlight style around the searchText field (and anything else coded within the div) when an error occurs.The html is a div statement that surrounds the area where the highlight should appear. For instance, in this example the wrapper div appears around the "searchText" feature:
<div id='searchTextWrapper'><input id='searchText' type='text' value='Enter your search term...'></div>
allowEmptySearchTextOnly applies to searchText field. Can be True or False, default is true. If false, validation is added on submission so that searchText cannot be empty.Add this statement to the JS script (no need for an input line with the other html elements):
allowEmptySearchText:false,
searchButtonInserts a submit button that only logs the search term value and goes to the search results page, even if you configure an email entry and enter text in the email; This feature only works in combination with searchText.
<input id='searchButton' type='button' value='Submit'>
searchTextAutoButtonThis feature allows you to auto-execute the same action as another button when you press 'enter' on the searchText field. By configuring this feature, it becomes equal to either the searchButton or the autoDecideButton, so the action of pressing ‘enter’ will be same as a mouse click on the autoDecideButtonAdd/update this style in your html:
<input id='searchTextAutoButton' type='hidden'>

Then within the JS script, instead of inserting
searchTextAutoButton:'searchTextAutoButton'
have the feature call the visible button, i.e.
searchTextAutoButton:'autoDecideButton'
emailCheckEnters a check box to capture the user’s permission. By default the box is un-checked, but can be set to start as checked. When configured with emailButton, user must have checked the box in order for button to be active and be able to submit the email. When configured with searchAndEmailButton or autoDecideButton, email field will be greyed out unless checkbox is checked; onced checked, the user must enter content in the email field in order to submit the page or else will see an error message.To show checkbox unchecked by default:
<input id='emailCheck' type='checkbox'>

To show checkbox checked by default:
<input id=’emailCheck’ type=’checkbox’ checked>
emailCheckWrapperSimilar to searchTextWrapper. Inserts the red highlight style around the emailCheck field (and anything else coded within the div) when an error occurs. NOTE: this field is pretty much unnecessary because of how error messaging and greyed out text are set up for the email field in combination with the emailCheck feature.The html is a div statement that surrounds the area where the highlight should appear. For instance, in this example the wrapper div appears around the "emailCheck" feature:
<div id='emailCheckWrapper'><input id='emailCheck' type='checkbox'></div>
emailEnters a field to capture an email; should be a text field. The value attribute has been suppressed on this feature because it was causing a bug (defining a value attribute caused any user-entered text to become the value after refreshing the page); use defaultEmailText instead to define a default value. NOTE: when active, this field will always have a validation to ensure the field is not empty; to have a page that allows a search term to be entered without entering an email, you’ll need to configure those fields separately with separate buttons (see the suggested combinations below).
<input id='email' type='text'>
defaultEmailTextInserts default text into the email field. This feature is used to replace the value attribute of email because in the old version of that feature, if a user enters some text in the field and refreshes the page, the user-entered text will be regarded as the default value. This option will resolve this problem.Add this statement to the JS script (no need for an input line with the other html elements):
defaultEmailText:'Enter your email address to receive periodic updates',
emailWrapperSimilar to searchTextWrapper. Inserts the red highlight style around the email field (and anything else coded within the div) when an error occurs.The html is a div statement that surrounds the area where the highlight should appear. For instance, in this example the wrapper div appears around the "email" feature:
<div id='emailWrapper'><input id='email' type='text' value='Enter your search email...'></div>
emailButtonInserts a submit button that only logs the email and stays on current page, even if you enter text in the search term. The email field must be configured; emailCheck is optional, but if no emailCheck, the email permission will always be true.
<input id='emailButton' type='button' value='Submit'>
emailAutoButtonSimilar to searchTextAutoButton but for the email field. This feature allows you to auto-execute the same action as another button when you press ‘enter’ on the email field. By configuring this feature, it becomes equal to the emailButton, so the action of pressing ‘enter’ will be the same as a mouse click on the emailButton.Add/update this style in your html:
<input id='emailAutoButton' type='hidden'>

Then within the JS script, instead of inserting
emailAutoButton:'emailAutoButton'
have the feature call the visible button, i.e.
emailAutoButton:'emailButton'
searchAndEmailButtonInserts a submit button that logs the search term and email and goes to the search result. Only works in combo with searchText and email features.
<input id='searchAndEmailButton' type='button' value='Submit'>
autoDecideButtonInserts a button that automatically decides the action based on the configuration of search term and email features. If there is only searchText, this will act the same as searchButton; if there is only email, this will act the same as emailButton; if there are both searchText and email, this will act the same as searchAndEmailButton.
<input id='autoDecideButton' type='button' value='Submit'>
highlightThis feature allows you to customize the wrapper style. By default, the checkhighlight class is called (a red 2px border).Add/update this style in your html:
<style type="text/css">
.checkhighlight2{border:2px solid #FF0000;}
</style>
Then add this JS statement:
highlight:'checkhighlight2',



Suggested Combinations:

Below are examples of common/working feature combinations. Features in parenthesis can be removed and the page should still work. For all features, the values can be updated to customize the page, and each input line can be moved around to create a visual design.

Search only - no validation:
searchText + searchButton + searchTextAutoButton (+ subject) (+ subjectParent) (+ defaultSearchText)

#includeMacros("AdWordsJump.TemplateJs")
<input id='searchText' type='text'>
<input id='subjectParent' type='hidden' value='LanguageArts'>
<input id='subject' type='hidden' value='ReadingComprehension'>
<input id='searchButton' type='button' value='Submit'>
<input id='searchTextAutoButton' type='hidden'>
<script type="text/javascript" language="javascript">
    new AdWordJumpPage({
        searchText:'searchText',
        defaultSearchText:'Enter your search term',
        subjectParent:'subjectParent',
        subject:'subject',
        searchButton:'searchButton',
        searchTextAutoButton:'searchButton'
    });
</script>



Search only - with validation:
searchText + searchButton + searchTextAutoButton (+ subject) (+ subjectParent) (+ defaultSearchText) + allowEmptySearchText (+ searchTextWrapper)

#includeMacros("AdWordsJump.TemplateJs")
<div id='searchTextWrapper'><input id='searchText' type='text'></div>
<input id='subjectParent' type='hidden' value='LanguageArts'>
<input id='subject' type='hidden' value='ReadingComprehension'>
<input id='searchButton' type='button' value='Submit'>
<input id='searchTextAutoButton' type='hidden'>
<script type="text/javascript" language="javascript">
    new AdWordJumpPage({
        searchText:'searchText',
        searchTextWrapper:'searchTextWrapper',
        defaultSearchText:'Enter your search term',
        subjectParent:'subjectParent',
        subject:'subject',
        allowEmptySearchText:false,
        searchButton:'searchButton',
        searchTextAutoButton:'searchButton'
    });
</script>



Email only - with checkbox:
email (+ emailWrapper ) (+ defaultEmailText) + emailCheck (+ emailCheckWrapper) + emailButton + emailAutoButton

#includeMacros("AdWordsJump.TemplateJs")
<div id='emailCheckWrapper'><input id='emailCheck' type='checkbox'></div>
<div id='emailWrapper'><input id='email' type='text'></div>
<input id='emailButton' type='button' value='Submit'>
<input id='emailAutoButton' type='hidden'>
<script type="text/javascript" language="javascript">
    new AdWordJumpPage({
        emailCheckWrapper:'emailCheckWrapper',
        emailCheck:'emailCheck',
        emailWrapper:'emailWrapper',
        email:'email',
        defaultEmailText:'Enter your email address to receive periodic updates',
        emailButton:'emailButton',
        emailAutoButton:'emailButton'
    });
</script>



Email only - without checkbox:
email (+ emailWrapper) (+ defaultEmailText) + emailButton + emailAutoButton

#includeMacros("AdWordsJump.TemplateJs")
<div id='emailWrapper'><input id='email' type='text'></div>
<input id='emailButton' type='button' value='Submit'>
<input id='emailAutoButton' type='hidden'>
<script type="text/javascript" language="javascript">
    new AdWordJumpPage({
        emailWrapper:'emailWrapper',
        email:'email',
        defaultEmailText:'Enter your email address to receive periodic updates',
        emailButton:'emailButton',
        emailAutoButton:'emailButton'
    });
</script>



Search & Email - with checkbox, with search validation:
searchText (+ subject) (+ subjectParent) (+ defaultSearchText) (+ searchTextWrapper) + allowEmptySearchText + email (+ emailWrapper) (+ defaultEmailText) + emailCheck (+ emailCheckWrapper) + searchAndEmailButton + searchTextAutoButton + emailAutoButton

#includeMacros("AdWordsJump.TemplateJs")
<div id='searchTextWrapper'><input id='searchText' type='text'></div>
<input id='subjectParent' type='hidden' value='LanguageArts'>
<input id='subject' type='hidden' value='ReadingComprehension'>
<div id='emailCheckWrapper'><input id='emailCheck' type='checkbox'></div>
<div id='emailWrapper'><input id='email' type='text'></div>
<input id='searchAndEmailButton' type='button' value='Submit'>
<input id='searchTextAutoButton' type='hidden'>
<input id='emailAutoButton' type='hidden'>
<script type="text/javascript" language="javascript">
    new AdWordJumpPage({
        searchText:'searchText',
        searchTextWrapper:'searchTextWrapper',
        allowEmptySearchText:false,
        subjectParent:'subjectParent',
        subject:'subject',
        defaultSearchText:'Enter your search term',
        emailCheckWrapper:'emailCheckWrapper',
        emailCheck:'emailCheck',
        emailWrapper:'emailWrapper',
        email:'email',
        defaultEmailText:'Enter your email address to receive periodic updates',
        searchAndEmailButton:'searchAndEmailButton',
        searchTextAutoButton:'searchAndEmailButton',
        emailAutoButton:'searchAndEmailButton'
    });
</script>



Search & Email - without checkbox, with search validation:
searchText (+ subject) (+ subjectParent) (+ defaultSearchText) (+ searchTextWrapper) + allowEmptySearchText + email (+ emailWrapper) (+ defaultEmailText) + searchAndEmailButton + searchTextAutoButton + emailAutoButton

#includeMacros("AdWordsJump.TemplateJs")
<div id='searchTextWrapper'><input id='searchText' type='text'></div>
<input id='subjectParent' type='hidden' value='LanguageArts'>
<input id='subject' type='hidden' value='ReadingComprehension'>
<div id='emailWrapper'><input id='email' type='text'></div>
<input id='searchAndEmailButton' type='button' value='Submit'>
<input id='searchTextAutoButton' type='hidden'>
<input id='emailAutoButton' type='hidden'>
<script type="text/javascript" language="javascript">
    new AdWordJumpPage({
        searchText:'searchText',
        searchTextWrapper:'searchTextWrapper',
        allowEmptySearchText:false,
        subjectParent:'subjectParent',
        subject:'subject',
        defaultSearchText:'Enter your search term',
        emailWrapper:'emailWrapper',
        email:'email',
        defaultEmailText:'Enter your email address to receive periodic updates',
        searchAndEmailButton:'searchAndEmailButton',
        searchTextAutoButton:'searchAndEmailButton',
        emailAutoButton:'searchAndEmailButton'
    });
</script>



Search & Email - with checkbox, no search validation (configure with separate buttons):
searchText (+ subject) (+ subjectParent) (+ defaultSearchText) + searchButton + searchTextAutoButton + email (+ emailWrapper) (+ defaultEmailText) + emailCheck (+ emailCheckWrapper) + emailButton + emailAutoButton

#includeMacros("AdWordsJump.TemplateJs")
#includeMacros("AdWordsJump.TemplateJs")
<input id='searchText' type='text'>
<input id='subjectParent' type='hidden' value='LanguageArts'>
<input id='subject' type='hidden' value='ReadingComprehension'>
<input id='searchButton' type='button' value='Search'>
<input id='searchTextAutoButton' type='hidden'>
<script type="text/javascript" language="javascript">
    new AdWordJumpPage({
        searchText:'searchText',
        defaultSearchText:'Enter your search term',
        subjectParent:'subjectParent',
        subject:'subject',
        searchButton:'searchButton',
        searchTextAutoButton:'searchButton'
    });
</script>
<br>
<hr>
<br>
<div id='emailCheckWrapper'><input id='emailCheck' type='checkbox' checked></div>
<div id='emailWrapper'><input id='email' type='text'></div>
<input id='emailButton' type='button' value='Submit Email'>
<input id='emailAutoButton' type='hidden'>
<script type="text/javascript" language="javascript">
    new AdWordJumpPage({
        emailWrapper:'emailWrapper',
        email:'email',
        defaultEmailText:'Enter your email address to receive periodic updates',
        emailCheck:'emailCheck',
        emailCheckWrapper:'emailCheckWrapper',
        emailButton:'emailButton',
        emailAutoButton:'emailButton'
    });
</script>



Search & Email - without checkbox, no search validation (configure with separate buttons):
searchText (+ subject) (+ subjectParent) (+ defaultSearchText) + searchButton + searchTextAutoButton + email (+ emailWrapper) (+ defaultEmailText) + emailButton + emailAutoButton

#includeMacros("AdWordsJump.TemplateJs")
#includeMacros("AdWordsJump.TemplateJs")
<input id='searchText' type='text'>
<input id='subjectParent' type='hidden' value='LanguageArts'>
<input id='subject' type='hidden' value='ReadingComprehension'>
<input id='searchButton' type='button' value='Search'>
<input id='searchTextAutoButton' type='hidden'>
<script type="text/javascript" language="javascript">
    new AdWordJumpPage({
        searchText:'searchText',
        defaultSearchText:'Enter your search term',
        subjectParent:'subjectParent',
        subject:'subject',
        searchButton:'searchButton',
        searchTextAutoButton:'searchButton'
    });
</script>
<br>
<hr>
<br>
<div id='emailCheckWrapper'><input id='emailCheck' type='checkbox' checked></div>
<div id='emailWrapper'><input id='email' type='text'></div>
<input id='emailButton' type='button' value='Submit Email'>
<input id='emailAutoButton' type='hidden'>
<script type="text/javascript" language="javascript">
    new AdWordJumpPage({
        emailWrapper:'emailWrapper',
        email:'email',
        defaultEmailText:'Enter your email address to receive periodic updates',
        emailButton:'emailButton',
        emailAutoButton:'emailButton'
    });
</script>



Additional Notes & Example Pages

To view Pan's original implementation notes, see Notes on GAWLPII.

The sample page http://current.dev.curriki.org/xwiki/bin/view/AdWordsJump/TestPage contains various combinations of the new features.