I need help about changing the button style in Discord.JS. interaction.component.setStyle("DANGER") works, but for multi-buttons inside an Action Row doesn't work. I tried <row>.components, it shows an array of MessageButton. I can also <row>.components[0].setStyle("DANGER") but it can't do the clicked one. Can you please help? Thank you!
Using interaction.message.components[0] would return the first MessageActionRow.
Take a look at the image that I've linked below to see the numbers that I've been talking about.
In order to edit button 5, you would have to get the 2nd button of the 2nd row.
This would be interaction.components[1].components[1]. You can then edit stuff like the style, label, etc. by running the usual .setLabel("Something") function.
Don't forget to reply to the interaction.
In your case you would have to update the original interaction-message.
A possible way to insert this would be:
const { Client } = require("discord.js")
const client = new Client(/*Your intents*/)
//Your code to create the buttons, etc.
client.on("interactionCreate", interaction=>{
if(interaction.isButton()){
if(interaction.customId=="your custom button id"){
//Remember to start counting with 0. 0 in the code equals 1 in real life...
interaction.message.components[1].interaction[1].setStyle("DANGER")
interaction.update({
components: interaction.components
})
}
}
})
client.login("your token")
Buttons with the numbers I talked about.
Related
I am a teacher with the worst possible slow gradebook, so much so that I would like to use some code to automate it. Basically to submit a grade I need to:
Find the cell box and click on it once to show the submit button
Then click on the button
HOWEVER: Every time you click on the box or button it gives it a new html ID. Therefore I need some code that looks for all the boxes and buttons and hits them. I am not sure how to do this without a static ID.
My code is most definitely formatted improperly, I am a total beginner.
var selectorBox = ['name_of_cell']
var selectorCollection = ['name_of_button']
selectorBox.forEach((s) =>{
let element = document.querySelector(s);
if(element) element.click();
else console.warn('No element found for the supplied selector:', s);
});
selectorCollection.forEach((s) =>{
let element = document.querySelector(s);
if(element) element.click();
else console.warn('no element found for the supplied selector:', s);
});
I need help:
Reformatting to the proper syntax / spacing etc.
Writing a function that finds and clicks on the box THEN the button (the above works).
Making my code look for the boxes then buttons, however as mentioned above the ID for each box and button switches every time you click on one, and for each different class i have (I have about 400 students.)
If you can select cells/buttons by class, you can loop through all cells, "click" them, and then "click" the button once it appears.
var cells = document.querySelectorAll('.x-grid-cell');
cells.foreach((cell) => {
cell.click();
var button = document.querySelector('.class_of_your_button')
button.click()
})
I'm currently working on a Qualtrics survey in which respondents have to solve a long list of anagrams, and then answer some demographic questions.
To make the anagram part easier, I've used a Loop and Merge block: the first field is the anagram to be solved, the second field is the solution of the anagram, and the survey can therefore check the answer of the respondent against the solution for each anagram.
As it is, the survey is working perfectly: however, I'd like to allow respondents to prematurely exit the loop by typing "EXIT" in the response field, and to redirect them to the next question block (the demographic questions).
This is typically something that is achieved using "Skip" logic: however, skipping to the end of the block does not do the trick (the loop restarts). I managed to redirect them to the end of the survey, but not to the demographic question block.
Is there a way to use javascript to jump to the demographic block or exit the loop and merge block prematurely? Am I missing a Qualtrics option that would do the trick?
If this is still relevant to you: I needed the same functionality and this is how I solved it: First, I define a helper variable, call it EndLoop, which I initialize to 0. Then I set up a function to change the value of EndLoop to 1 after people hit a button, additionally I add a display logic to the question in the loop showing them only if EndLoop is still 0 and hiding the questions as soon as EndLoop is 1.
This is a step-by-step instruction and the javascript and html code.
The bold stuff is what you need to do, the bulletpoints a more detailed instruction how to do it.
1. Before your loop-and-merge define an embedded data field called EndLoop and initialize it as 0.
Go to the Survey Flow Panel
Add a new element > select embedded data field
Name the field 'EndLoop'
Set its value t0 the number 0 by click on the link "set value now"
Make sure you move it before the merge-and-loop block
2. For each item in the loop set a display logic to show them conditional on 'EndLoop' = 0
Go to the options menu of each question in the loop
Select "add display logic"
Select "Embedded Data" from the first dropdown menu
A new type field opens > as name type EndLoop + select "is equal to" + type 0 as value
3. Insert a customized button into the page where people should be able to opt-out. The button runs a user-defined function called setEndLoop() onclick.
Click on the question where the button should appear
On the top-right of the question text select "html view"
The code I used is:
<input id="css-class-mybutton" onclick="setEndLoop()" value=" done " type="button">
If you want to change the button text, change the " done " in value = " done "
4. Define the function setEndLoop() using custom javascript to change the value of EndLoop to 1 and emulate a next button click
Go to the options menu of each question in the loop
Select "add JavaScript"
The code I used is:
/* Get the EndLoop variable */
var EndLoop = "${e://Field/EndLoop}";
Qualtrics.SurveyEngine.addOnload(function(){
/* hide previous and next button */
$('NextButton') && $('NextButton').hide();
$('PreviousButton') && $('PreviousButton').hide();
/* Function: on click on user-defined button -> change the field EndLoop */
var that = this;
setEndLoop = function(){
Qualtrics.SurveyEngine.setEmbeddedData('EndLoop', 1);
that.clickNextButton();
};
});
The button will not have the default style, thus, define a custom css to style your button to look like the buttons of your theme. The class name for the button I used here is id="css-class-mybutton", use .css-class-mybutton{ ... } in the css.
Hope that helps.
I know this is a bit late, but I had a similar issue and wanted to post an alternative solution. I used the loop and merge function, but I didn't want to have participants click on a button to exit the loop, instead I wanted to use a multiple choice question to exit the loop. This question was, "would you like to ask more questions?", with responses yes and no. If the participant selected "Yes" they would keep going through the loop and if they selected "No" they would exit the loop and go on to the next block of questions.
My first two steps are the same as those above.
1.Set up an Embedded data field named EndLoop and set the value to 1.
- in the survey flow panel select add an element. Then type in the name EndLoop.
- Then select set value now and set the value to 1.
- make sure that this is before your loop and merge block in the survey flow.
For each question in the loop and merge block use display logic to ensure that they only display when the embedded data element EndLoop is 1.
Now for the question "would you like to ask more questions?" add the following code in the add javascript area.
the javascript area can be found by clicking the advanced options button under the question number on the lefthand side of the screen. Select 'Add javascript...'
There will be some code already present...it should look like this:
Qualtrics.SurveyEngine.addOnload(function()
{
/Place Your Javascript Below This Line/
});
Basically I used event tracking to update the embedded data field EndLoop to the numerical value associated with the answer choice when the answer choice was selected. In this case the answer "Yes" had a value of 1 because it was the first option and "No" had a value of 2 because it was the second option. When "No" was selected, the embedded data field EndLoop was set to a value of 2. This then meant that none of the questions would display since they have display logic to ensure they only display when the EndLoop field is 1.
My entire code looks like this:
Qualtrics.SurveyEngine.addOnload(function ()
{
this.questionclick = function(event,element)
{
console.log(event, element);
if (element.type == 'radio')
{
var choiceNum = element.id;
if (choiceNum == 2)
{
Qualtrics.SurveyEngine.setEmbeddedData("EndLoop", choiceNum);
}
}
}
});
I used the second solution. Here's a minor correction for the script:
I wrote element.id.split('~')[2] instead of element.id, and it worked!
Qualtrics.SurveyEngine.addOnload(function ()
{
this.questionclick = function(event,element)
{
console.log(event,element);
if (element.type == 'radio')
{
var choiceNum = element.id.split('~')[2];
if (choiceNum == 2)
{
Qualtrics.SurveyEngine.setEmbeddedData("EndLoop", choiceNum);
}
}
}
});
I upgraded to IPython 2.0 today.
Alot of changes seem good, but the button to insert a new cell, above/below seems to be gone.
The option is still in the menu, and I believe the keyboard short cut works.
But the button is gone.
I'm sure there is a way to turn it back on, but the documentation for the new version doesn't seem super complete.
Possibly to turn it back on I need to adjust something in the config.
Which is just python script.
Maybe even tell it to insert a new element, and bind some javascript to it.
These buttons relocated to "Insert" menu. However, it is always good idea to use shortcut commands:
Ctrl+m+- (split cell)
Ctrl+m+a (insert cell above)
Ctrl+m+b (insert cell below)
If you can master them and other basic commands, it will make your notebook workflow really slick. Full list of commands can be found here.
I ended up teaching myself some javascript to do this.
You can make this change in the custom.js file.
which can be found in ~/.ipython/profile_[profile name]/static/custom.
Replace it with the following:
$([IPython.events]).on('app_initialized.NotebookApp', function(){
IPython.toolbar.add_buttons_group([
{
'label' : 'Insert Cell Above',
'icon' : 'fa-arrow-circle-o-up',
'callback': function () {
IPython.notebook.insert_cell_above('code');
IPython.notebook.select_prev();
IPython.notebook.focus_cell();
}
},
{
'label' : 'Insert Cell Below',
'icon' : 'fa-arrow-circle-o-down',
'callback': function () {
IPython.notebook.insert_cell_below('code');
IPython.notebook.select_next();
IPython.notebook.focus_cell();
}
}
]);
$('#insert_above_below').remove()
});
If you have already modified it,
then you can not replace the whole file, obviously, and should merge the appropriate parts.
The buttons will show up on the right.
The single + button for below is also removed.
as now in 5.7.4 version shortcut to create cell above is esc + a
I would like to disable a button
<BUTTON name="Next Page" onClick="Next()" VALUE="NextPage">NextPage</button>
based on a javascript variable
var opening = 0;
function Next()
{
var currentdoc = viewONE.getDocIndex();
if (currentdoc == 5)
{
**[DISABLE BUTTON]**
}
what is the javascript code please?
Background information:
Simply browsing through documents using a next and previous buttons. on the first document i want the "previous" button greyed out and on the the last document i want the "next" button greyed out.
Appologise for any incorect terms, newb and never asked this type of question before.
you are welcome to correct my term in a constructive way... need to learn.
Sam's solution is good and will disable the action of the button but won't disable it functionally.
You can disable the input button by changing changing the "disabled" attribute, but you really need to give your button a valid identifier first (I wouldn't even want to let jQuery select it by name due to the space).
jQuery would look something like this:
$('#yourbuttonid').attr('disabled','disabled');
Regular Javascript would be the following:
document.getElementById('yourbuttonid').disabled = true;
Here's an example on JSBin.
All you need to do is:
var opening = 0;
function Next()
{
var currentdoc = viewONE.getDocIndex();
if (currentdoc == 5)
{
return; //This will end the function immediately.
}
}
In terms of greying out buttons, can you not add / remove classes to show different versions of the buttons? We would need more to see your html, and what you have tried so far to help further.
Tutorial on return
On Stackoverflow site, the voting arrow initially it can be "vote-up-off"/"vote-down-off" if a user hasn't voted. It can also be one up / another down if the user voted before. Start from this 3 cases, upon the user click, I want to switch class. With help of nice people on this site, I arrived this code so far:
if($("a.vote-up-down").hasClass("vote-up-on")){
$(".vote-up-on").removeClass("vote-up-on").addClass("vote-up-off");
$(".vote-down-off").removeClass("vote-down-off").addClass("vote-down-on");
}
else if($("a.vote-up-down").hasClass("vote-down-on")){
$(".vote-down-on").removeClass("vote-down-on").addClass("vote-down-off");
$(".vote-up-off").removeClass("vote-up-off").addClass("vote-up-on");
}
This works if you don't click up arrow again when it is already vote-up-on, or you don't click down arrow again when it is already vote-down-on. Otherwise, it keeps switching disregarding the actual vote. If initially both arrow is off, this code will change both.
In my ajax function, I can provide response message of actual vote value ( 1 or -1), How can I correct the above code?
The whole thing is easier if you don't use vote-up-on and vote-down-on as different class names. Just toggle one class on: http://jsfiddle.net/ghSEb/.
$(".vote").on("click", function() {
$(".vote").not(this).removeClass("on"); // make sure to remove other vote
$(this).toggleClass("on"); // switch this one
});
Use the condition inside of .toggleClass()
var $voteDown = $("a.vote-up-down");
$(".vote-up-on").toggleClass('vote-up-off',$voteDown.hasClass("vote-up-off"))
$(".vote-up-off").toggleClass('vote-up-on',$voteDown.hasClass("vote-up-on"))