Welcome to my blog where i will show you how to add a survey module under a DNN page with horizontal options.
we know that when you create options for a question on a survey they are listed one below the another, this is beacause there is a table used fo displaying options. let me show you how we can overcome wit this by creating a question.
Note: read my compleat blog to achive the outputs.
Lets Start to create a Survey:
Prerequsits:
Make sure to add the survey module while setting up the site for the first time during installing the optional module.
Login as admin to the site to create a Survey page on your site where you want the survey module to be added
The Modules menu is found at the top of the page.
Click on the drop down box indicator to show the list of available modules. Mouse down until you find the Text/THML module and select this by single clicking with the mouse.
Click Add module it will add survey Module to your page
Add Question “How much do you rate yourself out of ten?“ in Question Dropdown list
Add 1 to 10 options in new option Dropdown list and click Add Option link for every value respectivelly. ie: you add each options 10 times.
Now you see a virtical List of options in your survey view.
There is a trick you need to do to make it horizontal. You need to add up another HTML module at the bottom of the page to make sure the survey module renders before the HTML module.
Now edit the HTML module in the Text view and select Raw as the text option.
now add the following Code under the module this will convert all the vertical options to horizontal.
The logic is very simple i am replacing all HTML tables which fall under surveyitems class td to UL and apply a horizontal style to the List.
we know that when you create options for a question on a survey they are listed one below the another, this is beacause there is a table used fo displaying options. let me show you how we can overcome wit this by creating a question.
Note: read my compleat blog to achive the outputs.
Lets Start to create a Survey:
Prerequsits:
- Dot Net Nuke 5.2.3 CE
- Survey Module Installed on the current site.
- Page to add the survey module.
Make sure to add the survey module while setting up the site for the first time during installing the optional module.
Login as admin to the site to create a Survey page on your site where you want the survey module to be added
The Modules menu is found at the top of the page.
Click on the drop down box indicator to show the list of available modules. Mouse down until you find the Text/THML module and select this by single clicking with the mouse.
Click Add module it will add survey Module to your page
Add Question “How much do you rate yourself out of ten?“ in Question Dropdown list
Add 1 to 10 options in new option Dropdown list and click Add Option link for every value respectivelly. ie: you add each options 10 times.
Now you see a virtical List of options in your survey view.
There is a trick you need to do to make it horizontal. You need to add up another HTML module at the bottom of the page to make sure the survey module renders before the HTML module.
now add the following Code under the module this will convert all the vertical options to horizontal.
<script language="JavaScript"> function convertToList(element) { var list = $("<ul/>"); $(element).find("tr").each(function() { var p = $(this).children().map(function() { return $(this).html(); }); list.append("<li>" + $.makeArray(p).join("") + "</li>"); }); $(element).replaceWith(list); } function GetOptionTables() { var SurvayNode=getElementByClass("surveyitems"); for(i=0; i<SurvayNode.length; i++) { convertToList(SurvayNode[i].getElementsByTagName("Table")[0]); } }function getElementByClass(theClass) { var allNodes = new Array(); var allHTMLTags=document.getElementsByTagName("td"); for (i=0,j=0; i<allHTMLTags.length; i++) { if (allHTMLTags[i].className==theClass) { allNodes [j++]= allHTMLTags[i]; } } return allNodes ; }GetOptionTables(); </script><style>li { float: left;padding-left:20px;padding-right:20px;display: block; }ul { list-style-type: none; height: 40px; width: 663px;padding-top:20px; margin: auto; }</style>
The logic is very simple i am replacing all HTML tables which fall under surveyitems class td to UL and apply a horizontal style to the List.
