Hello,

I don't know if I'm reading this wrong somehow, but for some reason, when I try to make a favorite picker, it just doesn't work.

Here's what I have changed from the base html, as instructed:
https://i.gyazo.com/651f76d7c1ad03fde115a5a6339f5541.png

And here's what shows up.

https://i.gyazo.com/cd03ba6ba16ba78dc0ef04b0ed193080.png

Any idea what I'm doing wrong?

so this is my first time coding so i dont really know what im doing
basically im trying to filter survivor contestants by ssn but when i added the filters for season 1, all of the options vanished and i dont know what i did wrong or how to fix it

`

option {
background:#a0e081;
padding:10px;
color:#000;
font-family:verdana, sans-serif;
font-size:10pt;
margin-left:5px;
margin-right:5000px;
}

a:link, a:visited {
color:#8;
font-weight:bold;
text-decoration:none;
}

a:active, a:hover {
color:#ACF;
}

#max-batch-size {
width:3em;
}

.info {
font-weight:bold;
}

button {
font-family:inherit;
cursor:pointer;
border:0;
border-radius:3px;
padding:0.3em 0.5em;
background:#CCC;
color:#000;
}

button:hover {
background:#DDD;
}

button.disabled {
background:#DDD;
color:#888;
cursor:not-allowed;
}

button.disabled:hover {
background:#DDD;
}

#container {
position:relative;
margin-left:-10px;
margin-right:-10px;
padding:0;
overflow:hidden;
}

@media (min-width:800px) {
/* Put the found favorites beside the picking div when the window is sufficiently large */
#picking {
float:left;
width:800px;
}

#secondary {
    margin-left:1000px;
}

}

@media (min-width:800px) {
/* Once we get to the point where 636px is less than half of the width of the screen, make the picking div just take up half */
#picking {
width:50%;
}

#secondary {
    margin-left:51%;
}

}

#pick {
background:#0aaecc;
color:#FFF;
font-size:larger;
font-weight:bold;
width:6em;
border-radius:5px;
margin-right:10px;
}

#pick.disabled {
background:#ACF;
}

#pick:hover {
background:#ACF;
}

.item-list {
padding:0;
list-style-type:none;
line-height:100px;
}

.item-list li {
margin:3px;
display:inline-block;
height:103px;
width:100px;
line-height:100px;
border:3px solid transparent;
text-align:center;
position:relative;
vertical-align:top;
overflow:hidden;
background:#8dc373;
color:#000;
}

.item-list li img {
vertical-align:middle;
max-height:100%;
max-width:100%;
}

.item-list li span {
display:inline-block;
vertical-align:middle;
line-height:1.2;
}

@media (max-width:636px) {
.item-list {
line-height:75px;
}

.item-list li {
    line-height:75px;
    height:75px;
    width:75px;
}

}

@media (max-width:423px) {
.item-list {
line-height:50px;
}

.item-list li {
    line-height:50px;
    height:50px;
    width:50px;
}

}

#evaluating li {
cursor:pointer;
}

#favorites li {
cursor:move;
}

.item-list li:hover {
background:#CDF;
}

.item-list.sorting li:hover {
background:#F7F7F7;
}

#evaluating li.selected {
border:3px solid #7AC;
}

#evaluating, #buttons {
text-align:center;
margin:auto;
}

#evaluating li.notice {
width:auto;
height:auto;
max-width:260px;
margin:0;
background:#F7F7F7;
border-radius:10px;
padding:30px 30px;
color:#000;
text-align:center;
line-height:1.4;
cursor:auto;
font-size:10pt;

}

#buttons {
margin-top:12px;
position:relative;
z-index:3;
}
</style>

Favorite Survivor Picker

Original source code by antialiasis with instructions here, based off of the Favorite Pokemon Picker

Updated up to Survivor 44

Potato was here

Number of contestants displayed:

var items = [
// Define your items here
{id: 's1rich', name: 'Richard Hatch', image: 'survivorfav/s1rich.png', role: '01', recurring: true},
{id: 's1kelly', name: 'Kelly Wigglesworth', image: 'survivorfav/s1kelly.png' role: '01', recurring: true},
{id: 's1rudy', name: 'Rudy Boesch', image: 'survivorfav/s1rudy.png' role: '01', recurring: true},
{id: 's1sue', name: 'Sue Hawk', image: 'survivorfav/s1sue.png' role: '01', recurring: true},
{id: 's1sean', name: 'Sean Kenniff', image: 'survivorfav/s1sean.png' role: '01', recurring: true},
{id: 's1colleen', name: 'Colleen Haskell', image: 'survivorfav/s1colleen.png' role: '01', recurring: true},
{id: 's1gervase', name: 'Gervase Peterson', image: 'survivorfav/s1gervase.png' role: '01', recurring: true},
{id: 's1jenna', name: 'Jenna Lewis', image: 'survivorfav/s1jenna.png' role: '01', recurring: true},
{id: 's1greg', name: 'Greg Buis', image: 'survivorfav/s1greg.png' role: '01', recurring: true},
{id: 's1gretchen', name: 'Gretchen Cordy', image: 'survivorfav/s1gretchen.png' role: '01', recurring: true},
{id: 's1joel', name: 'Joel Klug', image: 'survivorfav/s1joel.png' role: '01', recurring: true},
{id: 's1dirk', name: 'Dirk Been', image: 'survivorfav/s1dirk.png' role: '01', recurring: true},
{id: 's1ramona', name: 'Ramona Gray', image: 'survivorfav/s1ramona.png' role: '01', recurring: true},
{id: 's1stacey', name: 'Stacey Stillman', image: 'survivorfav/s1stacey.png' role: '01', recurring: true},
{id: 's1bb', name: 'B.B. Anderson', image: 'survivorfav/s1bb.png' role: '01', recurring: true},
{id: 's1sonja', name: 'Sonja Christopher', image: 'survivorfav/s1sonja.png' role: '01', recurring: true}
];

var myPicker = new picker.Picker({
items: items,
localStorageKey: 'picker-state',
defaultSettings: {
minBatchSize: 2,
maxBatchSize: 30
roles: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44'],
recurringOnly: true
},
shouldIncludeItem: function(item, settings) {
// Include only if:
// 1. the character's role is in the list of roles we've checked, and
// 2. we haven't checked the "recurring only" box, or the character is a recurring character.
return settings.roles.indexOf(item.role) !== -1 && (!settings.recurringOnly || item.recurring);
}
});

var pickerUI = new PickerUI(myPicker, {
elements: {
pick: "#pick",
pass: "#pass",
undo: "#undo",
redo: "#redo",
reset: "#reset",
evaluating: "#evaluating",
favorites: "#favorites",
settings: {
roles: '.roles',
recurringOnly: '#recurring-only'
maxBatchSize: '#max-batch-size'
}
}
});

pickerUI.initialize();

/* Sortable favorites - you can safely remove this, and the Sortable.min.js script, if you don't want to be able to sort your favorite list. /
var sortable = new Sortable(pickerUI.elem.favorites.get(0), {
draggable: '.item',
animation: 100,
onStart: function() {
pickerUI.elem.favorites.addClass("sorting");
},
onEnd: function() {
pickerUI.elem.favorites.removeClass("sorting");
},
onUpdate: function() {
myPicker.setFavorites(pickerUI.elem.favorites.children().map(function() {
return pickerUI.getItem(this);
}).get());
pickerUI.update(true);
}
});
/ End sortable favorites */

I am writing this under the assumption that the options to select from are chosen at random. If this is incorrect, take this suggestion with a grain of salt.

I think a method to improve the amount of time a user needs to interact with the system to get a result could be improved if the choices provided are at least slightly weighted to be "meaningful." If the pool of pokémon to choose from is very large, this is especially important.

A bit of explanation to show what I mean by meaningful choices:

• In a given group of pokémon, there are likely a handful of strongly preferred pokémon. These are the desired result. There are also a large number of pokémon that the user is indifferent towards or dislikes.
• By searching through the collected data so far, you can check how many others have been eliminated by a given pokémon. If a pokémon has been the victor in several different decisions, it can be implied the user has a decent opinion of them. If there are no or few results for a given pokémon beating others, then we don't have a lot of information on that pokémon.
• If we list an entry we have a lot of information about with entries that we do have information about, there are two outcomes. Either the low-information entry gets eliminated, or we get more information about it by it eliminating something else.

Additionally, the user will have an easier time choosing between something they like (something that we know keeps winning) and something they are indifferent towards, compared to say, nothing but strongly preferred choices, or nothing but indifferent choices.

Near the end of a round, all of the entries in the pool are preferred by the user to some degree. However, we can still compare the ones that have won more to the ones that have won the least, which is far more likely to provide the user with a straightforward decision and accurate results than fully random selection.
Due to the nature of those end-of-round choices, a lot of their top choices are going to get pitted against each other early on, which hides them until the victor gets added to the favorites list. If we give them choices they are less likely to be as strongly conflicted about, then the ones they feel the strongest about remain in the pool till the very end.

• It is a self-sustaining cycle. By having a preference for avoiding pitting favorites against each other until the end, we'll have more entries with more data in the pool. The more high-info entries we have, the easier it is to randomly select one they like, and compare it to entries we don't know much about.
• This also helps prevent indifferent entries from staying in the pool till the end simply due to random chance, since the selection is making it a priority to learn more about the entries that haven't been shown.
• In large pools, information is collected much faster, and entries that haven't been shown yet are slightly more likely to be compared to things we already know a bit about. This improves the odds of either learning more about the old entry by it continuing to win, or more about the new entry by extension (it just beat an entry with 10 wins, so is now 10 entries closer to the top)

As for implementation, like I said near the start I feel like this should be weighted chances. By still having some RNG, the user still gets the option to reroll. I'm not saying to hard code it to always pick the entries with the least and most information, but to have some sort of bias towards including a bit of both ends of the spectrum.

By making it more likely to ask the user straightforward and impactful questions, we improve both accuracy, time efficiency, and ease of use.

So I got the code and added a couple of characters, so I wanted to preview it to make sure it worked. But when I open it up in Chrome, it just brings me to Github and shows me the source code instead. I tried opening the file in wordpress, but that just didn't work at all. Someone help please.

I'm new to code, so this may be a stupid complaint, but when I view the picker, none of the characters show up.
Here's the code:

{id: 'Tansysong'},
{id: 'Moonfall'}

This is a test code before I add all the characters, so I only used two. Can you tell me what I did wrong?

This is mostly just things I've noticed could be better after using the Pokemon picker just now, apologies if these have previously been mentioned in other issues (I believe one has but the response to it seems different from how it actually works in the current tool).

• Pass button
  When pressing the pass button, I feel like it should eliminate every option on the screen as indifferent, as the UI suggests. Currently, it does not do that, instead moving on to the next batch while leaving the current batch still in the pool. This makes end-of-rounds with lots of random selections very annoying to deal with, as you have to click pass a lot of times until finally getting one you like with which you can start eliminating the others.

• New rounds
  After choosing a favourite, the intended functionality seems to be to take the other most picked from the pool and display those. Instead sometimes a new round will just soft-reset the system and show things that already have been shown and most of the times even never picked. Say in the Pokemon for example I could see mons I didn't pick in the very first round well into picking my 20th favourite, while ones I had picked a lot of times I didn't see again until favourite 30. I don't know if this is intended behaviour, or a bug. In either case, I'd like to give my opinion that things that are chosen multiple times should get priority, and if this is intended behaviour it should have some looking into as it clearly doesn't seem to be working well.

I think two years ago I used this tool, and the second point was working as I describe it, so I don't know what has changed, but if it's intended behaviour then I'd argue this is worse.

Judy isn't in the list of characters. She's one of my favourites, and when I do the favorite-picker she never pops up.

Hello, around 3 days ago as of writing this, I posted this issue about getting names under the images of the picker. You gave me edited code that did this, and I wanna thank you again for that! I ended up closing the issue, when I probably should've kept it open to report on problems as I noticed them, that was my mistake.

My issue now is that the buttons end up looking cramped and forced to the right side on mobile.

Normally, I would shrug this off, but I noticed that the Favorite Pokemon Picker and other pickers made using the same source code had the character options "scaled down" on smaller devices such as mobile phones.

I believe it's the new HTML I added from the last issue that changed something, and I'm curious if it's possible to still have the name + text underneath while having the buttons scaled down. I understand if this isn't possible, due to the changes necessary by adding the character names underneath.

For reference, here's the code as of right now (with most of the character IDs removed, since I currently have around ~600,) and if possible, I'd appreciate your help a lot, but I completely understand if it isn't.

Thank you again for making this picker, and making the code open-source! It's been really fun to work on.

When I attempted to upload the files to Wordpress to see if it would work, this is what happened.

https://favoriteservant.com/11-2/

While using the software, I frequently encountered situations where I would know exactly what I wanted to compare something with, and not get the chance to convey that information to the software.

For example, I told it I liked victreebel better than beedrill, but mega beedrill continued to show up for the next several rounds because I never got the chance to say I liked beedrill better than mega beedrill. The same happened with Venusaur and Mega Venusaur, I wanted to compare them to each other directly, but one got disqualified first.
This is relevant for similar entries, especially relevant with forms enabled.

What I think would help is having a button or field to allow manually inputting a set of entries to compare.
This way users can manually input data they feel would significantly impact the sorting.

For example, you could tell it you like a certain flavor of alcremie better than the default. Or sort vivillion colors in advance without ranking the species too high. Or tell it you like the 2nd evo of your starter better than the final evo.

The information conveyed by random matches isn't inaccurate, but I feel it would be very beneficial to the user to have the option of deciding what information is the most important to the rankings, and input it without having to just hope RNG gives them that relevant comparison.

Hello! I'm very new to coding or writing HTML and I don't do it often, but I wanted to make a favorites picker.

The picker that I'm making includes characters that don't have a "canon" design, since they're from a book series, and thus, any images I use won't be instantly recognizable.

I was curious if there's a way to make it so that the name of each character could be displayed underneath each character, alongside the circle portraits.

Also, I noticed that on the Favorite Pokemon Picker, the Pokemon are overlaid over the circle, rather than the edges of the image being clipped by the circle. Is there a setting/anything I can add to make it so my picker does the same thing?

Thank you so much, I don't know if this project is still actively maintained but nonetheless this has been a big help for starting my own picker!

I didn't see anything about this in the readme. Sometimes the preview images in the picker are just too small to make things out properly. Is there any way to make these display a bit larger? (I suppose this is more in the wheelhouse of question/recommendation than issue but I didn't really know of a better place to put this...)

idk what i did wrong but when i go on the website everything's there except the choices :/

a:link, a:visited {
color:#8;
font-weight:bold;
text-decoration:none;
}

a:active, a:hover {
color:#ACF;
}

.info {
font-weight:bold;
}

button {
font-family:inherit;
cursor:pointer;
border:0;
border-radius:3px;
padding:0.3em 0.5em;
background:#CCC;
color:#000;
}

button:hover {
background:#DDD;
}

button.disabled {
background:#DDD;
color:#888;
cursor:not-allowed;
}

button.disabled:hover {
background:#DDD;
}

#container {
position:relative;
margin-left:-10px;
margin-right:-10px;
padding:10px;
overflow:hidden;
}

@media (min-width:1024px) {
/* Put the found favorites beside the picking div when the window is sufficiently large */
#picking {
float:left;
width:636px;
}

#secondary {
    margin-left:646px;
}

}

@media (min-width:1300px) {
/* Once we get to the point where 636px is less than half of the width of the screen, make the picking div just take up half */
#picking {
width:50%;
}

#secondary {
    margin-left:51%;
}

}

#pick {
background:#58F;
color:#FFF;
font-size:larger;
font-weight:bold;
width:6em;
border-radius:5px;
margin-right:10px;
}

#pick.disabled {
background:#ACF;
}

#pick:hover {
background:#ACF;
}

.item-list li {
margin:5px;
display:inline-block;
padding:0;
text-align:center;
position: relative;
vertical-align:top;
line-height:1.2px;
width:106px;
}

.item-list li .name {
line-height:1.2;
}

.item-list li .image {
display:inline-block;
height:106px;
width:106px;
background:#F7F7F7;
border-radius:50%;
z-index:1;
position:relative;
overflow:hidden;
}

.item-list li img {
vertical-align:middle;
max-height:100%;
max-width:100%;
}

.item-list li .image span {
padding:0;
border:3px solid transparent;
height:100px;
width:100px;
}

.item-list li span {
display:inline-block;
vertical-align:middle;
line-height:1.2;
}

.item-list li.selected .image span {
padding:0;
height:100px;
width:100px;
border:3px solid #7AC;
border-radius:100%;
}

.item-list li:hover .image {
background:#CDF;
}

.item-list.sorting li:hover .image {
background:#F7F7F7;
}

@media (max-width:636px) {
.item-list {
line-height:10px;
padding;0;
}

.item-list li {
    line-height:10px;
    height:75px;
    width:75px;
}

.item-list li .image {
    height:81px;
    width:81px;
}

.item-list li .image span, .item-list li.selected .image span {
    height:75px;
    width:75px;
}

}

@media (max-width:423px) {
.item-list {
line-height:10px;
padding;0;
}

.item-list li {
    line-height:10px;
    height:125px;
    width:75px;
}

.item-list li .image {
    height:56px;
    width:56px;
}

.item-list li .image span, .item-list li.selected .image span  {
    height:50px;
    width:50px;
}

}

#evaluating li {
cursor:pointer;
}

#favorites li {
cursor:move;
}

#evaluating, #buttons {
text-align:center;
margin:auto;
}

#evaluating li.notice {
width:auto;
height:auto;
max-width:260px;
margin:auto;
background:#F7F7F7;
border-radius:10px;
padding:30px 30px;
color:#000;
text-align:center;
line-height:1.4;
cursor:auto;
font-size:10pt;
}

#buttons {
margin-top:30px;
position:relative;
z-index:3;
}
</style>

Taylor Swift songs Favorite Picker

For each group of Taylor Swift songs presented to you, click one or more of your favorites from that group and press the "Pick" button. Eventually, your favorite songs will start appearing under "Found Favorites". You can continue as long as you like to construct an arbitrarily long list of your favorite songs!

In principle, this picker is perfectly accurate, provided you pick consistently - you'll correctly get your second favorite second, even if it's pitted against your absolute favorite early on, for instance. You can reorder your favorites after you've found them, but in principle you shouldn't need to.

Feel free to include or exclude certain albums based on what you've listened to!^{(Songs outside of albums are not yet included but will most likely be one day.)}

Original source code by antialiasis with instructions here, based off of the Favorite Pokemon Picker! and the Warrior Cats Favorite Picker!

Include albums: Taylor Swift Fearless Speak Now Red 1989 reputation Lover folklore evermore Midnights

Number of characters displayed:

var items = [
// Taylor Swift
{id: 'timmcgraw', name: 'Tim McGraw', image: 'Taylor Swift.png', role: 'tay', recurring: true},
{id: 'picturetoburn', name: 'Picture To Burn', image: 'Taylor Swift.png', role: 'tay', recurring: true},
{id: 'teardropsonmyguitar', name: 'Teardrops On My Guitar', image: 'Taylor Swift.png', role: 'tay', recurring: true},
{id: 'aplaceinthisworld', name: 'A Place In This World', image: 'Taylor Swift.png', role: 'tay', recurring: true},
{id: 'coldasyou', name: 'Cold As You', image: 'Taylor Swift.png', role: 'tay', recurring: true},
{id: 'theoutside', name: 'The Outside', image: 'Taylor Swift.png', role: 'tay', recurring: true},
{id: 'tiedtogetherwithasmile', name: 'Tied Together With A Smile', image: 'Taylor Swift.png', role: 'tay', recurring: true},
{id: 'staybeautiful', name: 'Stay Beautiful', image: 'Taylor Swift.png', role: 'tay', recurring: true},
{id: 'shouldvesaidno', name: 'Should've Said No', image: 'Taylor Swift.png', role: 'tay', recurring: true},
{id: 'maryssong', name: 'Mary's Song (Oh My My My)', image: 'Taylor Swift.png', role: 'tay', recurring: true},
{id: 'oursong', name: 'Our Song', image: 'Taylor Swift.png', role: 'tay', recurring: true},
{id: 'imonlymewhenimwithyou', name: 'I'm Only Me When I'm With You', image: 'Taylor Swift.png', role: 'tay', recurring: true},
{id: 'invisible', name: 'Invisible', image: 'Taylor Swift.png', role: 'tay', recurring: true},
{id: 'aperfectlygoodheart', name: 'A Perfectly Good Heart', image: 'Taylor Swift.png', role: 'tay', recurring: true},
// Fearless
{id: 'fearless', name: 'Fearless', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'fifteen', name: 'Fifteen', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'lovestory', name: 'Love Story', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'heystephen', name: 'Hey Stephen', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'whitehorse', name: 'White Horse', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'youbelongwithme', name: 'You Belong With Me', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'breathe', name: 'Breathe', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'tellmewhy', name: 'Tell Me Why', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'yourenotsorry', name: 'You're Not Sorry', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'thewayilovedyou', name: 'The Way I Loved You', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'foreveralways', name: 'Forever & Always', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'thebestday', name: 'The Best Day', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'change', name: 'Change', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'jumpthenfall', name: 'Jump Then Fall', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'untouchable', name: 'Untouchable', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'fapiano', name: 'Forever & Always (Piano Version)', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'comeinwiththerain', name: 'Come In With The Rain', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'superstar', name: 'Superstar', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'theothersideofthedoor', name: 'The Other Side Of The Door', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'todaywasafairytale', name: 'Today Was A Fairytale', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'youalloverme', name: 'You All Over Me', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'mrperfectlyfine', name: 'Mr. Perfectly Fine', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'wewerehappy', name: 'We Were Happy', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'thatswhen', name: 'That's When', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'dontyou', name: 'Don't You', image: 'Fearless.png', role: 'fea', recurring: true},
{id: 'byebyebaby', name: 'Bye Bye Baby', image: 'Fearless.png', role: 'fea', recurring: true},
// Speak Now
{id: 'mine', name: 'Mine', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'sparksfly', name: 'Sparks Fly', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'backtodecember', name: 'Back To December', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'speaknow', name: 'Speak Now', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'dearjohn', name: 'Dear John', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'mean', name: 'Mean', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'thestoryofus', name: 'The Story Of Us', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'nevergrowup', name: 'Never Grow Up', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'enchanted', name: 'Enchanted', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'betterthanrevenge', name: 'Better Than Revenge', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'innocent', name: 'Innocent', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'haunted', name: 'Haunted', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'lastkiss', name: 'Last Kiss', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'longlive', name: 'Long Live', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'ours', name: 'Ours', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'superman', name: 'Superman', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'electrictouch', name: 'Electric Touch', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'whenemmafallsinlove', name: 'When Emma Falls In Love', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'icanseeyou', name: 'I Can See You', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'castlescrumbling', name: 'Castles Crumbling', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'foolishone', name: 'Foolish One', image: 'Speak Now.png', role: 'spe', recurring: true},
{id: 'timeless', name: 'Timeless', image: 'Speak Now.png', role: 'spe', recurring: true},
// Red
{id: 'stateofgrace', name: 'State Of Grace', image: 'Red.png', role: 'red', recurring: true},
{id: 'red', name: 'Red', image: 'Red.png', role: 'red', recurring: true},
{id: 'treacherous', name: 'Treacherous', image: 'Red.png', role: 'red', recurring: true},
{id: 'iknewyouweretrouble', name: 'I Knew You Were Trouble', image: 'Red.png', role: 'red', recurring: true},
{id: 'alltoowell', name: 'All Too Well', image: 'Red.png', role: 'red', recurring: true},
{id: 'twentytwo', name: '22', image: 'Red.png', role: 'red', recurring: true},
{id: 'ialmostdo', name: 'I Almost Do', image: 'Red.png', role: 'red', recurring: true},
{id: 'weareneverevergettingbacktogether', name: 'We Are Never Ever Getting Back Together', image: 'Red.png', role: 'red', recurring: true},
{id: 'staystaystay', name: 'Stay Stay Stay', image: 'Red.png', role: 'red', recurring: true},
{id: 'thelasttime', name: 'The Last Time', image: 'Red.png', role: 'red', recurring: true},
{id: 'holyground', name: 'Holy Ground', image: 'Red.png', role: 'red', recurring: true},
{id: 'sadbeautifultragic', name: 'Sad Beautiful Tragic', image: 'Red.png', role: 'red', recurring: true},
{id: 'theluckyone', name: 'The Lucky One', image: 'Red.png', role: 'red', recurring: true},
{id: 'everythinghaschanged', name: 'Everything Has Changed', image: 'Red.png', role: 'red', recurring: true},
{id: 'starlight', name: 'Starlight', image: 'Red.png', role: 'red', recurring: true},
{id: 'beginagain', name: 'Begin Again', image: 'Red.png', role: 'red', recurring: true},
{id: 'themomentiknew', name: 'The Moment I Knew', image: 'Red.png', role: 'red', recurring: true},
{id: 'comebackbehere', name: 'Come Back...Be Here', image: 'Red.png', role: 'red', recurring: true},
{id: 'girlathome', name: 'Girl At Home', image: 'Red.png', role: 'red', recurring: true},
{id: 'sogacoustic', name: 'State Of Grace (Acoustic Version)', image: 'Red.png', role: 'red', recurring: true},
{id: 'ronan', name: 'Ronan', image: 'Red.png', role: 'red', recurring: true},
{id: 'betterman', name: 'Better Man', image: 'Red.png', role: 'red', recurring: true},
{id: 'nothingnew', name: 'Nothing New', image: 'Red.png', role: 'red', recurring: true},
{id: 'babe', name: 'Babe', image: 'Red.png', role: 'red', recurring: true},
{id: 'messageinabottle', name: 'Message In The World', image: 'Red.png', role: 'red', recurring: true},
{id: 'ibetyouthinkaboutme', name: 'I Bet You Think About Me', image: 'Red.png', role: 'red', recurring: true},
{id: 'foreverwinter', name: 'Forever Winter', image: 'Red.png', role: 'red', recurring: true},
{id: 'run', name: 'Run', image: 'Red.png', role: 'red', recurring: true},
{id: 'theveryfirstnight', name: 'The Very First Night', image: 'Red.png', role: 'red', recurring: true},
{id: 'atwtmvtvftv', name: 'All Too Well (10 Minute Version)', image: 'Red.png', role: 'red', recurring: true},
// 1989
{id: 'welcometonewyork', name: 'Welcome To New York', image: '1989.png', role: 'nin', recurring: true},
{id: 'blankspace', name: 'Blank Space', image: '1989.png', role: 'nin', recurring: true},
{id: 'style', name: 'Style', image: '1989.png', role: 'nin', recurring: true},
{id: 'outofthewoods', name: 'Out Of The Woods', image: '1989.png', role: 'nin', recurring: true},
{id: 'allyouhadtodowasstay', name: 'All You Had To Do Was Stay', image: '1989.png', role: 'nin', recurring: true},
{id: 'shakeitoff', name: 'Shake It Off', image: '1989.png', role: 'nin', recurring: true},
{id: 'iwishyouwould', name: 'I Wish You Would', image: '1989.png', role: 'nin', recurring: true},
{id: 'badblood', name: 'Bad Blood', image: '1989.png', role: 'nin', recurring: true},
{id: 'wildestdreams', name: 'Wildest Dreams', image: '1989.png', role: 'nin', recurring: true},
{id: 'howyougetthegirl', name: 'How You Get The Girl', image: '1989.png', role: 'nin', recurring: true},
{id: 'thislove', name: 'This Love', image: '1989.png', role: 'nin', recurring: true},
{id: 'iknowplaces', name: 'I Know Places', image: '1989.png', role: 'nin', recurring: true},
{id: 'clean', name: 'Clean', image: '1989.png', role: 'nin', recurring: true},
{id: 'wonderland', name: 'Wonderland', image: '1989.png', role: 'nin', recurring: true},
{id: 'youareinlove', name: 'You Are In Love', image: '1989.png', role: 'nin', recurring: true},
{id: 'newromantics', name: 'New Romantics', image: '1989.png', role: 'nin', recurring: true},
// reputation
{id: 'readyforit', name: '...Ready For It?', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'endgame', name: 'End Game', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'ididsomethingbad', name: 'I Did Something Bad', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'dontblameme', name: 'Don't Blame Me', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'delicate', name: 'Delicate', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'lookwhatyoumademedo', name: 'Look What You Made Me Do', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'soitgoes', name: 'So It Goes...', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'gorgeous', name: 'Gorgeous', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'getawaycar', name: 'Getaway Car', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'kingofmyheart', name: 'King Of My Heart', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'dancingwithourhandstied', name: 'Dancing With Our Hands Tied', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'dress', name: 'dress', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'thisiswhywecanthavenicethings', name: 'This Is Why We Can't Have Nice Things', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'callitwhatyouwant', name: 'Call It What You Want', image: 'reputation.png', role: 'rep', recurring: true},
{id: 'newyearsday', name: 'New Year's Day', image: 'reputation.png', role: 'rep', recurring: true},
// Lover
{id: 'iforgotthatyouexisted', name: 'I Forgot That You Existed', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'cruelsummer', name: 'Cruel Summer', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'lover', name: 'Lover', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'theman', name: 'The Man', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'thearcher', name: 'The Archer', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'ithinkheknows', name: 'I Think He Knows', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'missamericanatheheartbreakprince', name: 'Miss Americana & The Heartbreak Prince', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'paperrings', name: 'Paper Rings', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'corneliastreet', name: 'Cornelia Street', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'deathbyathousandcuts', name: 'Death By A Thousand Cuts', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'londonboy', name: 'London Boy', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'soonyoullgetbetter', name: 'Soon You'll Get Better', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'falsegod', name: 'False God', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'youneedtocalmdown', name: 'You Need To Calm Down', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'afterglow', name: 'Afterglow', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'me', name: 'ME!', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'itsnicetohaveafriend', name: 'It's Nice To Have A Friend', image: 'Lover.png', role: 'lov', recurring: true},
{id: 'daylight', name: 'Daylight', image: 'Lover.png', role: 'lov', recurring: true},
// folklore
{id: 'theone', name: 'the 1', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'cardigan', name: 'cardigan', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'thelastgreatamericandynasty', name: 'the last great american dynasty', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'exile', name: 'exile', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'mytearsricochet', name: 'my tears ricochet', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'mirrorball', name: 'mirrorball', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'seven', name: 'seven', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'august', name: 'august', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'thisismetrying', name: 'this is me trying', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'illicitaffairs', name: 'illicit affairs', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'invisiblestring', name: 'invisible string', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'madwoman', name: 'mad woman', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'epiphany', name: 'epiphany', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'betty', name: 'betty', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'peace', name: 'peace', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'hoax', name: 'hoax', image: 'folklore.png', role: 'fol', recurring: true},
{id: 'thelakes', name: 'the lakes', image: 'folklore.png', role: 'fol', recurring: true},
// evermore
{id: 'willow', name: 'willow', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'champagneproblems', name: 'champagne problems', image: 'evemore.png', role: 'eve', recurring: true},
{id: 'goldrush', name: 'gold rush', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'tisthedamnseason', name: '/'tis the damn season', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'tolerateit', name: 'tolerate it', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'nobodynocrime', name: 'no body no crime', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'happiness', name: 'happiness', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'dorothea', name: 'dorothea', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'coneyisland', name: 'coney island', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'ivy', name: 'ivy', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'cowboylikeme', name: 'cowboy like me', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'longstoryshort', name: 'long story short', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'marjorie', name: 'marjorie', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'closure', name: 'closure', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'evermore', name: 'evermore', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'rightwhereyouleftme', name: 'right where you left me', image: 'evermore.png', role: 'eve', recurring: true},
{id: 'itstimetogo', name: 'it's time to go', image: 'evermore.png', role: 'eve', recurring: true},
// Midnights
{id: 'lavenderhaze', name: 'Lavender Haze', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'maroon', name: 'Maroon', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'antihero', name: 'Anti-Hero', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'snowonthebeach', name: 'Snow On The Beach', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'youreonyourown', name: 'You're On Your Own', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'midnightrain', name: 'Midnight Rain', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'question', name: 'Question...?', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'vigilanteshit', name: 'Vigilante Shit', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'bejeweled', name: 'Bejeweled', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'labyrinth', name: 'Labyrinth', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'karma', name: 'Karma', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'sweetnothing', name: 'Sweet Nothing', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'mastermind', name: 'Mastermind', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'thegreatwar', name: 'The Great War', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'biggerthanthewholesky', name: 'Bigger Than The Whole Sky', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'paris', name: 'Paris', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'highinfidelity', name: 'High Infidelity', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'glitch', name: 'Glitch', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'wouldvecouldveshouldve', name: 'Would've, Could've, Should've', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'dearreader', name: 'Dear Reader', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'hitsdifferent', name: 'Hits Different', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'yourelosingme', name: 'You're Losing Me', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'sotbmorelana', name: 'Snow On The Beach (feat. More Lana Del Rey)', image: 'Midnights.png', role: 'mid', recurring: true},
{id: 'karmaicespice', name: 'Karma (feat. Ice Spice)', image: 'Midnights.png', role: 'mid', recurring: true},
];

var myPicker = new picker.Picker({
items: items,
localStorageKey: 'picker-state',
defaultSettings: {
minBatchSize: 2,
maxBatchSize: 20,
roles: ['tay', 'fea', 'spe', 'red', 'nin', 'rep', 'lov', 'fol', 'eve', 'mid'],
recurringOnly: true
},
shouldIncludeItem: function(item, settings) {
// Include only if:
// 1. the character's role is in the list of roles we've, and
// 2. we haven't the "recurring only" box, or the character is a recurring character.
return settings.roles.indexOf(item.role) !== -1 && (!settings.recurringOnly || item.recurring);
}
});

var pickerUI = new PickerUI(myPicker, {
elements: {
pick: "#pick",
pass: "#pass",
undo: "#undo",
redo: "#redo",
reset: "#reset",
evaluating: "#evaluating",
favorites: "#favorites",
settings: {
roles: '.roles',
recurringOnly: '#recurring-only',
maxBatchSize: '#max-batch-size',
},
},
getItemElem: function(item, settings) {
return $('

' + item.name + '

/* Sortable favorites - you can safely remove this, and the Sortable.min.js script, if you don't want to be able to sort your favorite list. /
var sortable = new Sortable(pickerUI.elem.favorites.get(0), {
draggable: '.item',
animation: 100,
onStart: function() {
pickerUI.elem.favorites.addClass("sorting");
},
onEnd: function() {
pickerUI.elem.favorites.removeClass("sorting");
},
onUpdate: function() {
myPicker.setFavorites(pickerUI.elem.favorites.children().map(function() {
return pickerUI.getItem(this);
}).get());
pickerUI.update(true);
}
});
/ End sortable favorites */
</script>

When I initially created my picker it worked as intended, but after compressing it to a .rar file, moving it to a new device, and extracting it, it no longer works. The options below the picker I created are still present, but none of the options appear. The code is unchanged from the first device (I went back to check, and it still works fine there), and all the files are still present in the same folder with the same names, so I'm unsure what's caused this.

I'm still very new to coding, especially in this language. I can get the basic sorting to work, but when I try the code for filtering, no items appear, even though the checkboxes do. And clicking the checkboxes doesn't do anything. What should I do?

I'm almost certain this is my fault, but I have been unable to assign multiple roles to each item. I tried using the code listed in the previous issue, but when I do, the items don't appear at all on the page.
Ace Attorney Picker.txt