I am using LimeSurvey and I want to include a question where the respondent can include up to 30 names as answer. However, I don't want to initially present the respondent with 30 boxes as it is overwhelming and requires a ton of scrolling to proceed if you only have a few names to enter. Is is possible to code the question so that a new box appears only after the previous box has been filled? Thanks.
Here is another approach that uses buttons to add/remove the array rows - http://manual.limesurvey.org/Workarounds:_Manipulating_a_survey_at_runtime_using_Javascript#Variable_Length_Array_.28Multi_Flexible_Text.29_question
Cheers
EDIT: This answer was written because I could not find the answer presented by tpartner beforehand. The main difference is that mine is based on filling out the previous row and tpartner's on buttons to add or remove rows.
The following code should work for all single-choice arrays (e.g. 5-point scale array) and is adaptable to other types if you know some Javascript/jQuery. I want to do more like that - just not today. So feel free to ask for implementations for other question types.
The code can be added in the beginning of the template.js file using the template editor. The variables "quest" and "first" have to be adapted based on your survey.
//Function to only display a new row if there is an answer in the previous row
//NOTICE: Rows which are reset to "No answer" will not be hidden
//NOTICE: This scipt was written based on LimeSurvey 2.00+ build 131107
//NOTICE: It only works for single-choice arrays (e.g. 5-point scale array) or multiple short texts
//BEGIN
$(document).ready( function() {
//SGQ code of the question to apply this to
var quest = "12345X1234X12345";
//A(nswer) code of the first row
var first = "1";
//hide all rows except the first
$("tr[id^='javatbd" + quest + "']").css("display","none");
$("tr[id='javatbd" + quest + first + "']").css("display","table-row");
//display rows if previous is answered
$("[name^='" + quest + "']").change(function() {
if(this.value.trim().length >= 1)
$("tr[id='javatbd" + this.name + "']").next().css("display","table-row");
});
});
//END
Best regards
Which question type are you planning to use? Your best bet, according to me, should be to use Multiple Short text type question and create 30 text boxes. You can then use javascript to hide these text boxes and show them as soon as the previous text box gets some value as input.
cheers!
With version 2.x (not sure which version starts allowing this, I am running 2.7 and it works there), this functionality is inbuilt via the relevance equation and doesn't require coding. Just enter !is_empty(questioncode_Code) in the relevance equation for the text box you want to let appear. Code is the code of the field one above which triggers the appearance.
Related
I apologize if my question was already answered but I didn’t find any relevant answer.
I would like to dynamically edit cell value therefore I used:
var setButton = document.getElementById('setButton');
setButton.addEventListener('click', function(event) {
hot.getActiveEditor().beginEditing();
hot.render();
})
it edits cell but I don’t see original value, only empty.
Example:
https://jsfiddle.net/janzitniak/qdg420v8/6/
Note: Please select to any cell and then click to Set value to selected cell button.
Thank you for any help.
Solution
Long story short: Call enableFullEditMode() before you call beginEditing().
Not sure about the render() call though - I think that call can be removed.
JSFiddle
Storytime
I was looking for a solution to a similar problem, and had to look into the code to figure it out. In hindsight this was straightforward.
First there is some code which will reset the content of textareas to an empty string, to work with IME (or at least the comment says so)
And then there is code which will only set the original value into the cell, when the full editor mode is enabled.
I'm still relatively new to programming and I have a project I am working on. I am making a staff efficiency dashboard for a fictional pizza company. I want to find the quickest pizza making time and display the time and the staff members name to the user.
With the data charts it has been easy. Create a function, then use dc, e.g dc.barChart("#idOfDivInHtmlPage")
I suspect I might be trying to be too complicated, and that I've completely forgotten how to display any outputs of a js function to a html page.
I've been using d3.js, dc.js and crossfilter to represent most of the data visually in an interactive way.
Snippet of the .csv
Name,Rank,YearsService,Course,PizzaTime
Scott,Instore,3,BMC,96
Mark,Instore,4,Intro,94
Wendy,Instore,3,Intro,76
This is what I've tried so far:
var timeDim = ndx.dimension(function(d) {
return [d.PizzaTime, d.Name]
});
var minStaffPizzaTimeName = timeDim.bottom(1)[0].PizzaTime;
var maxStaffPizzaTimeName = timeDim.top(1)[0].PizzaTime;
}
then in the html
<p id="minStaffPizzaTimeName"></p>
<script type="text/javascript" src="static/js/graph.js">
document.write("minStaffPizzaTimeName");
</script>
You are surely on the right track, but in javascript you often have to consider the timing of when things will happen.
document.write() (or rather, anything at the top level of a script) will get executed while the page is getting loaded.
But I bet your data is loaded asynchronously (probably with d3.csv), so you won't have a crossfilter object until a bit later. You haven't shown these parts but that's the usual way to use crossfilter and dc.js.
So you will need to modify the page after it's loaded. D3 is great for this! (The straight javascript way to do this particular thing isn't much harder.)
You should be able to leave the <p> tag where it is, remove the extra <script> tag, and then, in the function which creates timeDim:
d3.select('#minStaffPizzaTimeName').text(minStaffPizzaTimeName);
This looks for the element with that ID and replaces its content with the value you have computed.
General problem solving tools
You can use the dev tools dom inspector to make sure that the p tag exists with id minStaffPizzaTimeName.
You can also use
console.log(minStaffPizzaTimeName)
to see if you are fetching the data correctly.
It's hard to tell without a running example but I think you will want to define your dimension using the PizzaTime only, and convert it from a string to a number:
var timeDim = ndx.dimension(function(d) {
return +d.PizzaTime;
});
Then timeDim.bottom(1)[0] should give you the row of your original data with the lowest value of PizzaTime. Adding .Name to that expression should retrieve the name field from the row object.
But you might have to poke around using console.log or the interactive debugger to find the exact expression that works. It's pretty much impossible to use dc.js or D3 without these tools, so a little investment in learning them will pay off big time.
Boom, finally figured it out.
function show_fastest_and_slowest_pizza_maker(ndx) {
var timeDim = ndx.dimension(dc.pluck("PizzaTime"));
var minPizzaTimeName = timeDim.bottom(1)[0].Name;
var maxPizzaTimeName = timeDim.top(1)[0].Name;
d3.select('#minPizzaTimeName')
.text(minPizzaTimeName);
d3.select('#maxPizzaTimeName')
.text(maxPizzaTimeName);
}
Thanks very much Gordon, you sent me down the right path!
i want to display the data into DataGrid manually in VB6, source of data is not from database or other source. I have created the column, like this:
For i = 2 To 4
DataGrid1.Columns.Add i
Next i
DataGrid1.Columns(0).Caption = "No"
DataGrid1.Columns(1).Caption = "Subdataset"
DataGrid1.Columns(2).Caption = "Dimension"
DataGrid1.Columns(3).Caption = "Check"
DataGrid1.Columns(3).Caption = "Detail"
but i can't add row and add value into it, i have tried like this:
Me.DataGrid1.AllowUserToAddRows = True
DataGrid1.Row = DataGrid1.Row + 1
then i got error
Please tell me if anybody can help me, thank you
Not only is DataGrid designed to be a bound control, it doesn't support unbound use. Says so right in the doc. So, the short answer is that you can't do what you are trying to do, because it's designed to display values from a database.
Instead, you'll want to use the MSFlexGrid control (Not the MSHFlexGrid control, although some of the doc confuses them), which you can read about here. Suppose you play around with that (the AddItem method is the fundamental piece you need to work with) and post back with specifics if you have problems.
Once you have added the table (DataGrid) right click select edit then you can insert columns:
unfortunately I can't find any help concerning to my specific problem.
I try to simplify it:
My grid consists of a shown column (A) and a hidden column (B) and other shown columns as well (C,D). With a custom button I can switch between these two columns, so that A is hidden and B is shown and vice versa.
My aim is as follows:
If the width of (shown) A has been changed, the width of (hidden) B should also be changed.
My current way to realize this this:
resizeStop: function () {
var $self = $(this);
shrinkToFit = $self.jqGrid("getGridParam", "shrinkToFit");
$self.jqGrid("setGridWidth", this.grid.newWidth, shrinkToFit);
var a = $self.jqGrid("getGridParam","colModel");
$self.jqGrid("setColWidth", "customers.name_short",a[2].width);
},
I works, but I have to wait for a wile and in addition to that I get the following log: "too much recursion". It seems that the function setColWidth is called more than 300 times.
I analyzed the code of setColWidth but I could not find any hint where it would call itself.
Can anybody help me?
Thanks in advance!
I suppose that you use my method setColWidth from here and the answer. It's wrong to use it inside of resizeStop callback.
You wrote: "With a custom button I can switch between these two columns, so that A is hidden and B is shown and vice versa." It seems to me that you need place one call of setColWidth method directly after you makes the column A or the column B visible (in the click event handle of your custom button). It should solve the problem.
UPDATED: The following demo http://jsfiddle.net/OlegKi/m7f9ghwq/18/ demonstrates the approach.
This has a question that has been asked in various forms before, but I cannot find a satisfactory answer so I'd like to ask this quite specifically.
I have a chosen select box which looks like this:
<select name="publicationID[]" id="publicationID[]" class="chzn-select-create-option" data-placeholder="Select Publication or type new..." style="width:550px;">
which is a slightly modified version of the regular chosen that allows you to add an element to the drop-down list (this isn't relevent to the question).
I have a button which says 'add another publication', which fires off an Ajax query to create a copy of the above element, publicationID[].
The trouble is chosen isn't applying to the clone because of conflicting IDs of the select element. As you can see I'm using the array version of the ID name so that I can iterate through the array after I post the data, but this is no good if the chosen style cannot apply to the copies.
My initial chosen() call is made in the ajax after returning the copy of the element, which normally works fine except in this instance of duplicate IDs:
(The Ajax)
document.getElementById(div).innerHTML=oXmlHttp.responseText
doChosen();
(The doChosen function)
function doChosen() {
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
$(".chzn-select-create-option").chosen({
create_option: function(term){
var chosen = this;
chosen.append_option({
value: term,
text: "New: " + term
});
},
persistent_create_option: true
});
}
I have seen a couple of solutions here talking about removing and reapplying the chosen style across the form, but nothing I've seen does this in a simplisic enough manner for me to follow.