Forum Discussion
How do I get learner to input a current date?
Hello! I need to create a quiz question in which the learner has to enter the current date into a text field or select the current date from a drop down like a calendar. How do I set this up and I also need the feedback to say correct, incorrect, or try again?
I'm a beginner in Storyline and I do not know JavaScript. Any step-by-step instructions will be appreciated.
Thank you!
I'll leave the solution I came to here for anyone else who might be experiencing the same issue with design formatting solutions as well.
I used Nedim's JavaScript code and template for FlatPickr's calendar date picker from Date Picker | Articulate - Community article, but the default date was showing YYYY/MM/DD and I needed it to display in the U.S. style of MM/DD/YYYY so CoPilot helped me change the code to this:
// Load js
const loadScript = (url, callback) => {
let script = document.createElement('script');
script.src = url;
script.onload = callback;
document.head.appendChild(script);};
// Load css
const loadCSS = (url) => {
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);};
loadCSS('https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');
loadCSS('https://npmcdn.com/flatpickr/dist/themes/material_green.css');
// Available themes: dark, material_blue, material_green, material_red, material_orange, airbnb, confettiloadScript('https://cdn.jsdelivr.net/npm/flatpickr', () => {
const dateInput = document.querySelector('.acc-textinput');
if (dateInput) {
// Initialize Flatpickr on the input field
flatpickr(dateInput, {
dateFormat: "m/d/Y", // <-- This sets MM/DD/YYYY formatonChange: (selectedDates, dateStr) => {
dateInput.value = dateStr; // Set the selected date in the input field
setVar('dateSelected', dateStr);},
onClose: (selectedDates, dateStr) => {
dateInput.disabled = true;
setTimeout(() => {
dateInput.disabled = false;
}, 100);}
});
}
});
Now I needed to format the design of the calendar date picker as the default was set to a green calendar header. I changed this line in the code from loadCSS('https://npmcdn.com/flatpickr/dist/themes/material_green.css'); to loadCSS('https://npmcdn.com/flatpickr/dist/themes/material_white.css'); so the calendar is white and used CoPilot to write an override code to adjust the default colors. Here's the updated code I used to have a calendar with a white background and black text with date showing in MM/DD/YYYY format.
// Load js
const loadScript = (url, callback) => {
let script = document.createElement('script');
script.src = url;
script.onload = callback;
document.head.appendChild(script);
};
// Load css
const loadCSS = (url) => {
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
};
loadCSS('https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');
loadCSS('https://npmcdn.com/flatpickr/dist/themes/material_white.css');
// Available themes: dark, material_blue, material_green, material_red, material_orange, airbnb, confetti
// Override header color
const style = document.createElement('style');
style.innerHTML = `
.flatpickr-months .flatpickr-month {
background-color: #FFFFFF !important;
}
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
color: black !important; /* optional: makes text readable */
}
`;
document.head.appendChild(style);
loadScript('https://cdn.jsdelivr.net/npm/flatpickr', () => {
const dateInput = document.querySelector('.acc-textinput');
if (dateInput) {
// Initialize Flatpickr on the input field
flatpickr(dateInput, {
dateFormat: "m/d/Y", // <-- This sets MM/DD/YYYY format
onChange: (selectedDates, dateStr) => {
dateInput.value = dateStr; // Set the selected date in the input field
setVar('dateSelected', dateStr);
},
onClose: (selectedDates, dateStr) => {
dateInput.disabled = true;
setTimeout(() => {
dateInput.disabled = false;
}, 100);
}
});
}
});
5 Replies
Thank you! This answered the first part of my question by using a Flatpickr date picker but not how to set up the variables and triggers to give the user feedback. I figured it out though by using CoPilot. 😊
I'll leave the solution I came to here for anyone else who might be experiencing the same issue with design formatting solutions as well.
I used Nedim's JavaScript code and template for FlatPickr's calendar date picker from Date Picker | Articulate - Community article, but the default date was showing YYYY/MM/DD and I needed it to display in the U.S. style of MM/DD/YYYY so CoPilot helped me change the code to this:
// Load js
const loadScript = (url, callback) => {
let script = document.createElement('script');
script.src = url;
script.onload = callback;
document.head.appendChild(script);};
// Load css
const loadCSS = (url) => {
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);};
loadCSS('https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');
loadCSS('https://npmcdn.com/flatpickr/dist/themes/material_green.css');
// Available themes: dark, material_blue, material_green, material_red, material_orange, airbnb, confettiloadScript('https://cdn.jsdelivr.net/npm/flatpickr', () => {
const dateInput = document.querySelector('.acc-textinput');
if (dateInput) {
// Initialize Flatpickr on the input field
flatpickr(dateInput, {
dateFormat: "m/d/Y", // <-- This sets MM/DD/YYYY formatonChange: (selectedDates, dateStr) => {
dateInput.value = dateStr; // Set the selected date in the input field
setVar('dateSelected', dateStr);},
onClose: (selectedDates, dateStr) => {
dateInput.disabled = true;
setTimeout(() => {
dateInput.disabled = false;
}, 100);}
});
}
});
Now I needed to format the design of the calendar date picker as the default was set to a green calendar header. I changed this line in the code from loadCSS('https://npmcdn.com/flatpickr/dist/themes/material_green.css'); to loadCSS('https://npmcdn.com/flatpickr/dist/themes/material_white.css'); so the calendar is white and used CoPilot to write an override code to adjust the default colors. Here's the updated code I used to have a calendar with a white background and black text with date showing in MM/DD/YYYY format.
// Load js
const loadScript = (url, callback) => {
let script = document.createElement('script');
script.src = url;
script.onload = callback;
document.head.appendChild(script);
};
// Load css
const loadCSS = (url) => {
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);
};
loadCSS('https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');
loadCSS('https://npmcdn.com/flatpickr/dist/themes/material_white.css');
// Available themes: dark, material_blue, material_green, material_red, material_orange, airbnb, confetti
// Override header color
const style = document.createElement('style');
style.innerHTML = `
.flatpickr-months .flatpickr-month {
background-color: #FFFFFF !important;
}
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
color: black !important; /* optional: makes text readable */
}
`;
document.head.appendChild(style);
loadScript('https://cdn.jsdelivr.net/npm/flatpickr', () => {
const dateInput = document.querySelector('.acc-textinput');
if (dateInput) {
// Initialize Flatpickr on the input field
flatpickr(dateInput, {
dateFormat: "m/d/Y", // <-- This sets MM/DD/YYYY format
onChange: (selectedDates, dateStr) => {
dateInput.value = dateStr; // Set the selected date in the input field
setVar('dateSelected', dateStr);
},
onClose: (selectedDates, dateStr) => {
dateInput.disabled = true;
setTimeout(() => {
dateInput.disabled = false;
}, 100);
}
});
}
});Here's how CoPilot helped me set up the Storyline variables and triggers to get the user feedback interaction of selecting "today's date" as correct (user selects current date) or incorrect (user selects wrong date):
Using the TextEntry box from the FlatPickr calendar date picker make sure the Object Trigger for the TextEntry box is disabled. It will say something like "Set TextEntry equal to the typed value When TextEntry loses focus".- Create two Storyline variables.
Variable Name: dateSelected
Type: Text
(This stores the date the user picks from the calendar)
Default value: leave blank
Variable Name: isCorrect
Type: True/False
(Used to determine which feedback to show)
Default value: False
(This works because the 'dateSelected' text is in the JavaScript code I put in the previous thread.) - Add a trigger to evaluate the date. (This trigger runs when the learner clicks Submit.)
Add a JavaScript trigger on the Submit button. Make sure the Submit button for the Player is enabled on the slide you're working on (Story View-Slide Properties- Submit button checked).
Add Trigger - Action - Execute Trigger - click JavaScript link and copy and paste the following code:
var player = GetPlayer();
var userDate = player.GetVar("dateSelected");
// Parse the user's selected date
var parsed = new Date(userDate);
if (isNaN(parsed.getTime())) {
player.SetVar("isCorrect", false);
return;}
// Normalize user date to YYYY-MM-DD
var m = ("0" + (parsed.getMonth() + 1)).slice(-2);
var d = ("0" + parsed.getDate()).slice(-2);
var y = parsed.getFullYear();
var userNorm = y + "-" + m + "-" + d;// Get today's date
var today = new Date();
var tm = ("0" + (today.getMonth() + 1)).slice(-2);
var td = ("0" + today.getDate()).slice(-2);
var ty = today.getFullYear();
var todayNorm = ty + "-" + tm + "-" + td;// Compare
4. Preview the slide and click the interaction to see if the calendar picker looks and works the way you want it to.
player.SetVar("isCorrect", userNorm === todayNorm);
This code reads the date the user picked and sets variable isCorrect to true or false.
3. Add triggers to show feedback.
(Optional: if this in NOT a graded question, disable the default "Submit interaction" trigger or delete it. If it IS a graded question, then keep the "Submit interaction" trigger.) Then, on the Submit button, add these triggers above the default "Submit interaction" trigger.
Trigger 1- show Correct layer
Add Trigger- Action - Show Layer Correct
When - User clicks Submit button
If isCorrect = True
Trigger 2-show Incorrect layer
Add Trigger- Action - Show Layer Incorrect
When - User clicks Submit button
If isCorrect = False
Well done AngeliqueB​! Thank you for mentioning me.
- Create two Storyline variables.
