Solved
Generating dates into the future on the basis of a user-entered value
I am creating a survey which requires users to specify the start date of a programme on the first page, then populate 4 matrix tables with a value for each of the following 28 days. I am trying to make the scale points on each table dates generated on the basis of the user's original entry value (+1, +2... +28). Not sure how to get qualtrics to recognise the original entry as a date (rather than just text) so I can perform this addition. I have come across a problem of a somewhat similar nature in the support pages where the person asking the question was directed toward 'moment.js' but details were sparse and I couldn't quite get my head round how to integrate this. I'd be grateful for any help or suggestions.
Best answer by fleb
Hi @sumwonels,
there are more ways how to do this. Here is one of them:
1) Create an HTML element with an ID in each label of a row in your matrix. Start with this one `<div id = "d0">0</div>` and then increase both numbers by one in each following line.
2) Compute the last date and then get all dates between the start date and the end date using this function from GitHub.
3) Convert your dates into the correct format and put these values into your HTML elements.
So the whole code could look somehow like this:
Qualtrics.SurveyEngine.addOnload(function()
{
function stringToDate(_date,_format,_delimiter)
{
var formatLowerCase=_format.toLowerCase();
var formatItems=formatLowerCase.split(_delimiter);
var dateItems=_date.split(_delimiter);
var monthIndex=formatItems.indexOf("mm");
var dayIndex=formatItems.indexOf("dd");
var yearIndex=formatItems.indexOf("yyyy");
var month=parseInt(dateItems[monthIndex]);
month-=1;
var formatedDate = new Date(dateItems[yearIndex],month,dateItems[dayIndex]);
return formatedDate;
}
var getDates = function(startDate, endDate) {
var dates = [],
currentDate = startDate,
addDays = function(days) {
var date = new Date(this.valueOf());
date.setDate(date.getDate() + days);
return date;
};
while (currentDate <= endDate) {
dates.push(currentDate);
currentDate = addDays.call(currentDate, 1);
}
return dates;
};
var start = stringToDate("${q://QID10/ChoiceTextEntryValue}","dd/MM/yyyy","/");
var end = new Date();
end = end.setDate(start.getDate() + 2);
var dates = getDates(start, end);
var i;
var final_date;
for (i = 0; i < dates.length; i++)
{//temp = dates[i].getUTCDay() + ". " + (dates[i].getUTCMonth() + 1) +". "+ dates[i].getUTCFullYear();
//temp = dates[i][2]+'/'+ dates[i][1]+'/'+ dates[i][0];
var final_date = dates[i].getDate()+". "+(dates[i].getMonth()+1)+". "+dates[i].getFullYear();
document.getElementById("d"+i).innerHTML = final_date;}
});
Note: Don't forget to change the ID of the question to yours and the end date to correct one.
+6Hi @sumwonels,
I found a nice function which can convert text to Date on StackOverflow:
function stringToDate(_date,_format,_delimiter)
{
var formatLowerCase=_format.toLowerCase();
var formatItems=formatLowerCase.split(_delimiter);
var dateItems=_date.split(_delimiter);
var monthIndex=formatItems.indexOf("mm");
var dayIndex=formatItems.indexOf("dd");
var yearIndex=formatItems.indexOf("yyyy");
var month=parseInt(dateItems[monthIndex]);
month-=1;
var formatedDate = new Date(dateItems[yearIndex],month,dateItems[dayIndex]);
return formatedDate;
}
var start = stringToDate("17/9/2014","dd/MM/yyyy","/");
Use content validation to ensure your date will be always in the correct format.
And one more tip: it might be the most user-friendly if you combine the validation with a date picker. You can find the code for this here. Just replace dashes with slashes in the right places.
Hi @Fleb,
Many thanks for your response.
Please excuse my ignorance - I am new to both qualtrics and java - but how do i complete the next step: to have qualtrics generate the further values (the +1 to +28 days) as scale points in the matrix tables?
+6Hi @sumwonels,
there are more ways how to do this. Here is one of them:
1) Create an HTML element with an ID in each label of a row in your matrix. Start with this one `<div id = "d0">0</div>` and then increase both numbers by one in each following line.
2) Compute the last date and then get all dates between the start date and the end date using this function from GitHub.
3) Convert your dates into the correct format and put these values into your HTML elements.
So the whole code could look somehow like this:
Qualtrics.SurveyEngine.addOnload(function()
{
function stringToDate(_date,_format,_delimiter)
{
var formatLowerCase=_format.toLowerCase();
var formatItems=formatLowerCase.split(_delimiter);
var dateItems=_date.split(_delimiter);
var monthIndex=formatItems.indexOf("mm");
var dayIndex=formatItems.indexOf("dd");
var yearIndex=formatItems.indexOf("yyyy");
var month=parseInt(dateItems[monthIndex]);
month-=1;
var formatedDate = new Date(dateItems[yearIndex],month,dateItems[dayIndex]);
return formatedDate;
}
var getDates = function(startDate, endDate) {
var dates = [],
currentDate = startDate,
addDays = function(days) {
var date = new Date(this.valueOf());
date.setDate(date.getDate() + days);
return date;
};
while (currentDate <= endDate) {
dates.push(currentDate);
currentDate = addDays.call(currentDate, 1);
}
return dates;
};
var start = stringToDate("${q://QID10/ChoiceTextEntryValue}","dd/MM/yyyy","/");
var end = new Date();
end = end.setDate(start.getDate() + 2);
var dates = getDates(start, end);
var i;
var final_date;
for (i = 0; i < dates.length; i++)
{//temp = dates[i].getUTCDay() + ". " + (dates[i].getUTCMonth() + 1) +". "+ dates[i].getUTCFullYear();
//temp = dates[i][2]+'/'+ dates[i][1]+'/'+ dates[i][0];
var final_date = dates[i].getDate()+". "+(dates[i].getMonth()+1)+". "+dates[i].getFullYear();
document.getElementById("d"+i).innerHTML = final_date;}
});
Note: Don't forget to change the ID of the question to yours and the end date to correct one.
@Fleb
I am grateful for all the help you've given and don't want to abuse your generosity, but I'm still not quite there and need to ask one more question.
I've had a look through that code and each section and its purposes make sense. I have copied it into the appropriate place.
I'm unable to get the range of dates it generates into the matrix table. I'm stuck at this instruction: "3. ...put these values into your HTML elements.". The code you gave me for the labels for the table ( < div id = "d0">0 </ div > ) produces only the text inserted in the middle (in this case "0"). Apologies if I'm being stupid - but what am I missing?
+6Hi,
step 3 should be done by this line of code: > document.getElementById("d"+i).innerHTML = final_date;
I can't really figure out where is your problem from this text, so here are a few suggestions on what to check:
1) Where exactly is your code? It has to be placed in the script part of the matrix question (and not that one with the date of start).
2) Try the code just with the first 3 days. There could be a problem if you try to change an unexisting HTML element. This could happen if you have more date in javascript than rows in your matrix or if you have a typo in some of the labels.
3) Did you modify the code as I wrote you in the note below the code? Make sure there is a correct ID of the question with the starting date (not the matrix question).
4) Is the question where participants should insert a date a text question? It doesn't work for other question types.
5) Is the date in the correct format with correct separators (in my code: dd/MM/yyyy)?
6) Check your console (press F12) and try to figure out what is wrong. There should be some error(s). If the whole code doesn't crash, try to print your variables one by one to the console log https://w3schools.com/jsref/met_console_log.asp and check them. If the code crashes, try to execute the first few lines (i.e.: comment all other parts but beware of parentheses) and if it's OK, add few next lines. Lie this you can figure out where exactly is your problem.
7) Note that the text of your labels will change after the input of the date. It will be visible only if you preview the survey.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.