I am very new to programming but have come across a situation in my work where I believe I need to use some javascript to make my survey manageable for the participant. The client wants to use Qualtrics as a scheduling system. Faculty identify time slots that they are available and the survey would start by hiding the ones that they will not be available for. Then dynamically hides buttons as the quotas fill for a given time slot.
My matrix table is 10 columns x 15 rows to accommodate all the times and days. I'm trying to reuse snips of codes that I have found online and so far have gotten to:
Qualtrics.SurveyEngine.addOnload(function()
{
$("QR~QID14~1~4").up().hide();
});
This is hiding a choice, but instead of row 1 column 4 it is hiding row 1 column 15 (whose inspect element is QR~QID14~1~10). Whatever I change my column number to (4 in the example) it is always hiding the check box in the last column. I don't understand what I am doing wrong. So I've gone into my results and realize it is hiding the correct button but the rest of the buttons are shifting left so it appears that the last button is hidden.
Once I get it to hide the correct column I want to add conditions to my code that will hide it based on the value of a quota, which I believe would look like:
Qualtrics.SurveyEngine.addOnload(function()
{
if ('${qo://QUOTAID/QuotaCount}' > 0) $("QR~QID14~1~4").up().hide();
});
Where I would find the QUOTAID via Qualtric's piped text option
I know I can format this as a list but there are too many options for some faculty to make that look right.
You want to hide the contents of the table cell, not the cell itself.
Qualtrics.SurveyEngine.addOnload(function() {
$('QR~QID14~1~4').up('td').childElements().invoke('hide');
});
Related
I am have been trying to find a solution to my google sheet issue and have tried quite a few workarounds thus far, to no avail. I imagine I may need to use javascript to do the action, however, I am a beginner to javascript.
Here is what I would like the sheet to do.
Check 'sheet#2' and see if an item in the specified range is set to "out-of-stock"
Sheet#2
If the item in the range is set to "out-of-stock", then remove the item from the data validation list on 'sheet#1' and if it is "in-stock" then show the item on the data validation list.
Sheet#1
Here are some things I have tried thus far (if it helps):
on sheet#2 when an item is set to out stock, conditional format it, to make the cell text white (not visible). This works well for that particular sheet. however, data validation lists do not display the data it pulls exactly as it appears (so the text still shows on the dropdown list)
IF statement. I've tried a WHOLE LOTTA IF and IFS statements. This did not work, because you cannot have an if statement in the same cell as a data validation cell and b/c the cell name will likely need to be constantly changed in the future. (But I did, however, find a workaround to another issue I was trying to solve for a day now WHOOP WHOOP!)
Oh and I also tried conditional formating the cell so that if it ='s out of stock white out the cell... however I get an error that conditional formatting does not work across 2 sheets
... so yeah if anyone may know of a solution to get this to work I will forever appreciate it! I'll keep scouring google for solutions in the meantime.
For the sake of simplicity, I've created a sample spreadsheet with two sheets: Sheet 1 and "Stock".
Sheet 1
Stock
Solution
I've created an Apps Script function to set the Data Validation as you have specified.
I've used the Javascript filter and map functions to simplify getting the data, but basically:
I get all the rows from the Stock sheet and load them into "memory"
I then discard from "memory" the rows that do not have their second column (row[1]) equal to "In Stock".
Then I get the remaining rows and grab only their first column (row[0]).
I then create a new DataValidation object (with it's builder) that uses the list we got above and assign it to the range I want to have validated.
//VARIABLES
var rangeToValidate = "B2:B";
var validateSheet = "Sheet1";
var optionSheet = "Stock";
function refreshDataValidation() {
var inStockOptions = SpreadsheetApp.getActive().getSheetByName(optionSheet).getDataRange().getValues()
.filter(function (row) { return (row[1]=="In Stock")})
.map(function(row) {return row[0]});
SpreadsheetApp.getActive().getSheetByName(validateSheet).getRange(rangeToValidate)
.setDataValidation(
SpreadsheetApp.newDataValidation().requireValueInList(inStockOptions).build()
);
}
Also, by adding some code with Apps Script, the sheet will make sure that your drop-down is always up-to-date.
I am refreshing the drop-down every time the sheet is opened and every time there is an edit to the Stock sheet on the B column.
//When the sheet is opened, refresh the data validation
function onOpen(e) {
refreshDataValidation();
}
//When a change is made to the Stock sheet, also refresh validation
function onEdit(e) {
var range = e.range;
if (range.getSheet() == SpreadsheetApp.getActive().getSheetByName(optionSheet) && range.getColumn() == 2) {
refreshDataValidation();
}
}
Hope this helps!
Okay guys I found a solution, anyone visiting this post in the future here you go!!!
So yes, you can use the script as provided above. However, if you already have other scripts, data validations, and other formatting's going then ,like me, you may actually run into a lot of errors and conflicting issues.
As a workaround here is what I did to get everything to work properly. you will need a total of 3 sheets: a main sheet, a 2nd sheet with your options, and a 3rd sheet to house the pulled data.
On the 2nd sheet, be sure to have a column that shows if the item is "in-stock" or "out-of-stock" (I did it as a dropdown menu)
On the 3rd sheet select the cell where you would like the data to show. And use the filter function formula to pull only the rows from sheet 2 that are equal to "in-stock"
Formula syntax: =(FILTER (range, condition1, [condition2, ...])
My Formula: =FILTER( sheet2!G3:R5, sheet2!I3:I5 <> "out-of-stock")
sheet2!G3:R5 = the range of rows/columns I want it to pull from.
sheet2!I3:I5 = the column I would like it to look for the words "in stock" or "out of stock" in
<>"out-of-stock" = show me the data if a cell in column I3 does not equal "out-of-stock" (meaning, only show in-stock options)
As you can see the formula will pull/show you all the rows that = "in-stock", anything you have set to "out-of-stock" will not show on the 3rd sheet.
Last part,
On the main sheet select the column you would like for your drop down list to show in. Add the data validation being sure to list from the range on the 3rd sheet (not sheet 2).
Now you can hide the 3rd sheet as you should no longer need it, unless debugging.
Finally, As you can see now, my main sheet will only show the items in the drop down list that are set to "in-stock", out of stock options are removed from drop down list, unless set back to in-stock. (see how pic3 only shows 2 options in drop list, although pic1 shows that there are 3 options available).
so now basically if I change an item to "out-of-stock" on the 2nd sheet, the item will be removed from drop-down list on the main sheet, AND if I change an item to "in-stock" the item will be added/displayed on the drop list. The 3rd sheet is no longer needed. This solution is perfect if you have multiple users and would only like for them to be able to select an option that is "in-stock"!
Hope this helps someone!!! And thank you to the people of above who gave other possible solutions!!
I've to create a table with a row of input boxes.
The values entered in will then be multiplied by script and the answer placed in the last input box, the row total, if you will.
There is a button above the table to add another row.
Each time a row is added, the same input boxes need to appear, and the same 'row script' to calculate the row total.
Once a particular row has been added/updated, and it's row total calculated, a final number needs to be found, which is essentially the total of the row totals. Let's call it the column total.
My skills aren't super high, am learning as I go, especially from the decent responses this site seems to attract. One hopes this is at least understandable....
I've managed to get row to be added by a button using table.insertrow, and the scripts for doing the math are no problem. I have also managed to use a simple loop to create the dynamic variable names for each input box; named the same and numbered by row.
Where I'm stuck is generating the scripts to totalise a line and then another tot totalise the table, as the script needs to factor in how many rows there are, and I can't see how to write this except using Eval() (so far..).
I've also experimented a little with this and each but just got bogged down and could no longer see the logical flow.
What I've written to date is now just a mess.
Instead of posting code for comment/fix, I seek to better understand which way to address the problem using Javascript if at all possible, hopefully without using Eval().
Any suggestions would be welcomed by this brain-dead, gone bleary, wishing he hadn't started, noob.
UPDATE: Have seen a lot of ways to use JQuery, but it's not for me at the moment.
perhaps phrased differently - how in javascript would you loop through a table column, adding up all of the cell contents (numbers) in that column, please. I can't seem to figure out how to use Each as the variable names are different (numbered) per row.
Something like this:
var tr = document.createElement("<tr>");
var td = document.createElement("<td>");
tr.appendChild(td);
You have to create table row, fill it with cells, cells with buttons and so on. As result you will have table row variable which you can insert every time your button clicked.
I have a container that contains data populated from my database as well as data created by the user on another page.
My issue is styling. Currently my page jumbles and the columns are all over the place. They appear to be following the end of the longest column.
Jumbly
I would like for after 3 columns a new row to be created, but I'm not sure how to go about this.
Note/Tricky part:- My users have the option to sort where each Column (Sales, BingBong, Game of Thrones) goes. If they want Game of Thrones first, they can make it the first column. Obviously this messes things up because each column will have a different height at different times
Most everything I've seen squishes all the columns together to create a pinterest-like look. That is not what I want and I know that my design will create white space. That is what I'm being told to create.
UPDATE: Here is my code to show you how I iterate through each of these departments (sales, rainbows n'sprinkles, Game of Thrones, etc).
Hopefully this makes it clear why adding a clearfix div doesn't work in my case
code
http://www.codeply.com/go/jXuoGHHker
This worked brilliantly!!! Works with dynamic data...all I grabbed were the few lines of CSS
So I have this issue with accessibility where we need a table's data to be focusable by row. To accomplish this, our first instinct was to set a tabindex on the <tr>. At first, this seemed to work just fine. Unfortunately, the data is loaded into the table via ajax and this causes issues since the data has no awareness of tabindexes already set on the page. So for instance, let's say that the page index look like this:
1 2 3 [ ??? live data ??? ] 4 5 6
Once the data for the table is loaded, the indexes end up looking like this:
1 2 3 [ 1 2 3 4 ] 4 5 6
So now, when the user tries to tab around, the first index is at the top of the page, the second index is inside the live region, then the third is at the top of the page, and the fourth is inside of the live region and so on. Essentially, it indexes all the 1s in order, then the 2s, etc.
How do ensure that the table data is tabbable in the correct order once it's loaded?
So far, my first idea was to write a script that basically grabs everything with a tabindex and then resets the order to include the new indexed elements. This sort of works, but only if the tab indexes are in alignment with the DOM order (default/natural).
Any ideas/solutions for this?
UPDATE:
I just tried setting all of the row indexes to 0, hoping that it would just make it focusable and insert it into the "natural flow" of the tabindexes. This feels kind of weird though. Is the right approach?
As a best practice, rely on the natural tab order and don't use tabindex in this manner. It will be a nightmare to attempt to set and manage the tab order manually - definitely an anti-pattern.
Screen readers already supply table navigation tools that allow users to navigate by row and by cell, so there is no need to make TR's focusable in this way.
Table nav commands for:
NVDA: http://community.nvda-project.org/documentation/userGuide.html#SystemCaret
JAWS: http://www.freedomscientific.com/Training/Surfs-up/Table_Reading_Commands.htm
VoiceOver: https://www.apple.com/voiceover/info/guide/_1133.html#mchlp2723
Im doing a survey application . It is having option to add questions.If on clicks on add button it will show the text box for adding question and a select box for selecting question type(radio button , check box) once it fill the field i will store than in database ans display in UI. then the user have option for adding question above and below. if he add question above i need to reorder the question number below. if he add question in middle i need to update the question number below that. how can i solve this situation ?
In a similar situation, I have shown the list of items to be sorted in a table/grid and given the option to the user to move up or down the items in the grid as per their choice. I kept a column for order in the grid (hidden in my case) and a corresponding column in the database table. Whenever there is a reordering in the grid, I update the order by a swap operation for the two rows that are swapping position. So, once the user has done the reordering and save the order using a button, I use to update the order column according to the order in the front page.
https://pixbyfunc.appspot.com/pub/asq/asq.html is a running example of a contingent questionnaire. A different set of questions are presented based on if the user likes wine or not.
It's designed using JavaScript that looks like:
Q().ask("Have you had your drink today?");
Q('like-wine').using('radio', 'Yes', 'No').ask("Do you like wine?");
Q('like-wine').matches('no').naming('reason').using('textarea').ask("Why not?").abort();//stop the survey
Q().ask("How much do you drink a day?");
Q('which-wine').using('checkbox', 'Reds', 'Whites', 'Other').ask("What do you like?");
Q('which-wine').matches('reds').ask("If you would like to receive a free bottle of Chateau d'Yquem Sauternes 2004 from your Santa, please provide your email.");
Q().start();
You can view the source to see how Q is implemented and to modify to suit your needs.