{"_id":"5d9c8a50f0e45d0027f976a4","project":"5474381b59fade080004c920","version":{"_id":"5474381b59fade080004c923","project":"5474381b59fade080004c920","__v":12,"createdAt":"2014-11-25T08:04:43.418Z","releaseDate":"2014-11-25T08:04:43.418Z","categories":["5474381b59fade080004c924","5474387f59fade080004c927","547d639078fd57080023cb81","549eb883b67f031400a5dc0e","54c87c8bab03760d00c8e4ec","54ca1480eb42170d0045d3c6","54ca1539dd5cf30d00c35135","560e634e59cb8d0d0015cce1","560e7bfc59cb8d0d0015ccfb","562531976ff1010d009b16f0","57c0378264ebf60e006886d9","57c037912588020e004b5c8e"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"57c0378264ebf60e006886d9","project":"5474381b59fade080004c920","version":"5474381b59fade080004c923","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-08-26T12:35:14.009Z","from_sync":false,"order":3,"slug":"javascript-snippets","title":"Code snippets"},"user":"5d22e103a7b632005dd49a4e","__v":0,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2019-10-08T13:08:32.439Z","link_external":false,"link_url":"","sync_unique":"","hidden":false,"api":{"method":"get","results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":999,"body":"[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/2707203-numberscale1.png\",\n        \"numberscale1.png\",\n        742,\n        170,\n        \"#343435\"\n      ]\n    }\n  ]\n}\n[/block]\n<a href=\"https://q.surveypal.com/Number-Scale-Label-Example\" target=\"_blank\" >Example survey</a>\n[block:api-header]\n{\n  \"title\": \"Instructions\"\n}\n[/block]\n[How to add JavaScript to a survey](doc:about-snippets)\n\nThe parameters for this snippet can be edited at the beginning of the script:\n- ``elementCode`` will tell which element will have the labels attached to it \n- ``badLabel`` is the text on the left end of the scale\n- ``goodLabel`` is the text on the right end of the scale.\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>\\njQuery(document).ready(function(){\\n\\n  var elementCode = \\\"p0e0\\\";\\n  var badLabel = \\\"Bad\\\";\\n  var goodLabel = \\\"Good\\\";\\n  \\n  jQuery( '<div style=\\\"width:100%;height:40px;\\\"><div style=\\\"width:49%;float:left\\\">'+badLabel+'</div><div style=\\\"width:49%;text-align:right;float:left\\\">'+goodLabel+'</div></div>' ).insertBefore( '.element[data-elementname=\\\"'+elementCode+'\\\"] > .options' );\\n\\n});\\n</script>\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nYou need to do this for each number scale element you want to add labels to, so you may need to add and edit the code multiple times in the same survey.\n\nIf you like to add label for every number then use below snippet.\nWhen you have more than 1-5 buttons, just copy and paste if statement again and change value (\"1\", \"2\") to match your number.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script>        \\njQuery(document).ready(function(){\\n\\njQuery('.element[data-elementname=\\\"p0e1\\\"] label.label').each(function() {\\n\\n  if(jQuery( this ).text().trim() == \\\"1\\\") {\\n\\tjQuery(this).text(\\\"first\\\");  \\n}\\n  if(jQuery( this ).text().trim() == \\\"2\\\") {\\n\\tjQuery(this).text(\\\"second\\\");  \\n}\\n  if(jQuery( this ).text().trim() == \\\"3\\\") {\\n\\tjQuery(this).text(\\\"third\\\");  \\n}\\n  if(jQuery( this ).text().trim() == \\\"4\\\") {\\n\\tjQuery(this).text(\\\"fourth\\\");  \\n}\\n  if(jQuery( this ).text().trim() == \\\"5\\\") {\\n\\tjQuery(this).text(\\\"fifth\\\");  \\n}\\n\\n});\\n\\n});\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"You can use this snippet to add labels to number scale -elements.","slug":"add-labels-for-number-scale-1","type":"basic","title":"Add labels for number scale"}

Add labels for number scale

You can use this snippet to add labels to number scale -elements.

[block:image] { "images": [ { "image": [ "https://files.readme.io/2707203-numberscale1.png", "numberscale1.png", 742, 170, "#343435" ] } ] } [/block] <a href="https://q.surveypal.com/Number-Scale-Label-Example" target="_blank" >Example survey</a> [block:api-header] { "title": "Instructions" } [/block] [How to add JavaScript to a survey](doc:about-snippets) The parameters for this snippet can be edited at the beginning of the script: - ``elementCode`` will tell which element will have the labels attached to it - ``badLabel`` is the text on the left end of the scale - ``goodLabel`` is the text on the right end of the scale. [block:code] { "codes": [ { "code": "<script>\njQuery(document).ready(function(){\n\n var elementCode = \"p0e0\";\n var badLabel = \"Bad\";\n var goodLabel = \"Good\";\n \n jQuery( '<div style=\"width:100%;height:40px;\"><div style=\"width:49%;float:left\">'+badLabel+'</div><div style=\"width:49%;text-align:right;float:left\">'+goodLabel+'</div></div>' ).insertBefore( '.element[data-elementname=\"'+elementCode+'\"] > .options' );\n\n});\n</script>\n", "language": "javascript" } ] } [/block] You need to do this for each number scale element you want to add labels to, so you may need to add and edit the code multiple times in the same survey. If you like to add label for every number then use below snippet. When you have more than 1-5 buttons, just copy and paste if statement again and change value ("1", "2") to match your number. [block:code] { "codes": [ { "code": "<script> \njQuery(document).ready(function(){\n\njQuery('.element[data-elementname=\"p0e1\"] label.label').each(function() {\n\n if(jQuery( this ).text().trim() == \"1\") {\n\tjQuery(this).text(\"first\"); \n}\n if(jQuery( this ).text().trim() == \"2\") {\n\tjQuery(this).text(\"second\"); \n}\n if(jQuery( this ).text().trim() == \"3\") {\n\tjQuery(this).text(\"third\"); \n}\n if(jQuery( this ).text().trim() == \"4\") {\n\tjQuery(this).text(\"fourth\"); \n}\n if(jQuery( this ).text().trim() == \"5\") {\n\tjQuery(this).text(\"fifth\"); \n}\n\n});\n\n});\n</script>", "language": "javascript" } ] } [/block]