SFS event match wizard (prototype v4)

Developer
Harry Sadler
Size
8,689 Kb
Views
8,096
  1. SFS event match wizard (prototype v4) Previews
  2. SFS event match wizard (prototype v4) HTML Codes
  3. SFS event match wizard (prototype v4) CSS Codes
  4. SFS event match wizard (prototype v4) JS Codes

How do I make an sfs event match wizard (prototype v4)?

Let's build a toy that matches you with your symphony concert event!Adding real music recordings for the audio players. Add social media sharing buttons. Fix point system.... What is a sfs event match wizard (prototype v4)? How do you make a sfs event match wizard (prototype v4)? This script and codes were developed by Harry Sadler on 29 November 2022, Tuesday.

SFS event match wizard (prototype v4) Previews
IQ Test

SFS event match wizard (prototype v4) - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SFS event match wizard (prototype v4)</title> <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.5.0/pure-min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="quizMainContainer"> <!--Start Page--> <div class="questionWrap" id="startPage"> <div class="quizTextMiddle" id="startQuizContainer"> <h2>Use the Event Wizard to find the concerts that are right for you!</h2> </div> <div class="startButtonContainer"> <a class="pure-button button-initialize" id="startButton" href="#"> GET STARTED </a> </div> </div> <!--QUESTION #1--> <div class="questionWrap hide" id="question1"> <div class="questionImagesContainer imageMTT hide" id="questionImagesContainer"> </div> <div class="questionTextContainer" id="questionTextContainer1"> <div class="bigNumberDiv"> <span class="bigNumber">1.</span> </div> <span class="qText"> Which of these works of art do you find most appealing? </span> </div> <div class="answersContainer" id="answersContainer1"> <img class="imageAnswer" src="https://i.imgur.com/zzjgZzt.jpg"/> <img class="imageAnswer" src="https://i.imgur.com/WBK4U7f.jpg"/> <img class="imageAnswer" src="https://i.imgur.com/68gyrIC.jpg"/> <a class="pure-button button-answer" id="answer1A" href="#" data-attr="americanStory"> A </a> <a class="pure-button button-answer" id="answer1B" href="#" data-attr="piano"> B </a> <a class="pure-button button-answer" id="answer1C" href="#" data-attr="international"> C </a> <img class="imageAnswer add_margin_top" src="https://i.imgur.com/xG348dt.jpg"/> <img class="imageAnswer add_margin_top" src="https://i.imgur.com/0A2qd8F.jpg"/> <img class="imageAnswer add_margin_top" src="https://i.imgur.com/dzOif4h.jpg"/> <a class="pure-button button-answer" id="answer1D" href="#" data-attr="youngStars"> D </a> <a class="pure-button button-answer" id="answer1E" href="#" data-attr="newSoundVisual"> E </a> <a class="pure-button button-answer" id="answer1F" href="#" data-attr="classics"> F </a> </div> </div> <!--QUESTION #2--> <div class="questionWrap hide" id="question2"> <div class="questionImagesContainer imageBasses" id="questionImagesContainer"> </div> <div class="questionTextContainer add_margin_top" id="questionTextContainer2"> <div class="bigNumberDiv"> <span class="bigNumber">2.</span> </div> <span class="qText"> What sporting events do you enjoy? </span> </div> <div class="answersContainer" id="answersContainer2"> <a class="pure-button button-answer" id="answer2A" href="#" data-attr="classics"> Football </a> <a class="pure-button button-answer" id="answer2B" href="#" data-attr="international"> Soccer </a> <a class="pure-button button-answer" id="answer2C" href="#" data-attr="storyVisual"> Wii Sports </a> <a class="pure-button button-answer" id="answer2D" href="#" data-attr="pianoYoung"> The Olympics </a> <a class="pure-button button-answer" id="answer2A" href="#" data-attr="american"> Baseball </a> <a class="pure-button button-answer" id="answer2B" href="#" data-attr="newSound"> X Games </a> </div> </div> <!--QUESTION #3--> <div class="questionWrap hide" id="question3"> <div class="questionImagesContainer imageMcFerrin" id="questionImagesContainer"> </div> <div class="questionTextContainer" id="questionTextContainer3"> <div class="bigNumberDiv"> <span class="bigNumber">3.</span> </div> <span class="qText"> Which of these music clips appeal to you? </span> </div> <div class="answersContainer" id="answersContainer3"> <!--Audio first row--> <table class="audioTable"> <tr> <td> <div class="audioPlayer"> <audio controls class=""> <source src="http://users.skynet.be/fa046054/home/P22/track06.mp3" type="audio/mpeg"> <embed src="http://users.skynet.be/fa046054/home/P22/track06.mp3"> </audio> </div> <a class="pure-button button-answer" id="answer3A" href="#" data-attr="newSoundAmerican"> Alt Energy </a> <div class="audioPlayer add_margin_top"> <audio controls> <source src="http://users.skynet.be/fa046054/home/P22/track06.mp3" type="audio/mpeg"> <!--<source src="horse.ogg" type="audio/ogg">--> <embed src="http://users.skynet.be/fa046054/home/P22/track06.mp3"> </audio> </div> <a class="pure-button button-answer" id="answer3C" href="#" data-attr="international"> Brahms Symphony 1 </a> <div class="audioPlayer add_margin_top"> <audio controls> <source src="http://users.skynet.be/fa046054/home/P22/track06.mp3" type="audio/mpeg"> <!--<source src="horse.ogg" type="audio/ogg">--> <embed src="http://users.skynet.be/fa046054/home/P22/track06.mp3"> </audio> </div> <a class="pure-button button-answer" id="answer3E" href="#" data-attr="story"> Copland Appalachian Spring </a> </td> <!--audio second row--> <td> <div class="audioPlayer"> <audio controls class=""> <source src="http://users.skynet.be/fa046054/home/P22/track06.mp3" type="audio/mpeg"> <!--<source src="horse.ogg" type="audio/ogg">--> <embed src="http://users.skynet.be/fa046054/home/P22/track06.mp3"> </audio> </div> <a class="pure-button button-answer" id="answer3B" href="#" data-attr="classics"> Orff Carmina burana </a> <div class="audioPlayer add_margin_top"> <audio controls> <source src="http://users.skynet.be/fa046054/home/P22/track06.mp3" type="audio/mpeg"> <!--<source src="horse.ogg" type="audio/ogg">--> <embed src="http://users.skynet.be/fa046054/home/P22/track06.mp3"> </audio> </div> <a class="pure-button button-answer" id="answer3D" href="#" data-attr="pianoYoung"> Shostakovich Piano Conc 1 </a> <div class="audioPlayer add_margin_top"> <audio controls> <source src="http://users.skynet.be/fa046054/home/P22/track06.mp3" type="audio/mpeg"> <!--<source src="horse.ogg" type="audio/ogg">--> <embed src="http://users.skynet.be/fa046054/home/P22/track06.mp3"> </audio> </div> <a class="pure-button button-answer" id="answer3F" href="#" data-attr="visual"> Beethoven Missa solemnis </a> </td> </tr> </table> </div> </div> <!--QUESTION #4--> <div class="questionWrap hide" id="question4"> <div class="questionImagesContainer imageApplause hide" id="questionImagesContainer"> </div> <div class="questionTextContainer" id="questionTextContainer4"> <div class="bigNumberDiv"> <span class="bigNumber">4.</span> </div> <span class="qText"> Which of these composers have awesome beards or mustaches? </span> </div> <div class="answersContainer" id="answersContainer4"> <img class="imageAnswer" src="https://i.imgur.com/QCrrHXr.jpg"/> <img class="imageAnswer" src="https://i.imgur.com/y5SSsFX.jpg"/> <img class="imageAnswer" src="https://i.imgur.com/CPGPMK6.jpg"/> <a class="pure-button button-answer" id="answer4A" href="#" data-attr="americanYoung"> A </a> <a class="pure-button button-answer" id="answer4B" href="#" data-attr="story"> B </a> <a class="pure-button button-answer" id="answer4C" href="#" data-attr="newSound"> C </a> <img class="imageAnswer add_margin_top" src="https://i.imgur.com/exw1xth.jpg"/> <img class="imageAnswer add_margin_top" src="https://i.imgur.com/WIuaMjj.jpg"/> <img class="imageAnswer add_margin_top" src="https://i.imgur.com/Mo9bJtf.jpg"/> <a class="pure-button button-answer" id="answer4D" href="#" data-attr="classics"> D </a> <a class="pure-button button-answer" id="answer4E" href="#" data-attr="pianoInternational"> E </a> <a class="pure-button button-answer" id="answer4F" href="#" data-attr="visual"> F </a> </div> </div> <!--Results Page--> <div class="resultsPage hide" id="resultsPage"> <div class="quizTextMiddle" id="resultsText"> <h4>Your Symphony Style is...</h4> </div> <!-- 3 events results --> <h1 id="resultsHeader">Group Title</h1> <p id="resultsSubhead">Group Subhead</p> <table class="eventResults"> <tr class="eventResultsImages"> <td> <img id="imageEvent1" src="http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/L/Lamsma-S_583x336.jpg" /> </td> <td> <img id="imageEvent2" src="http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/T/Temirkanov-Y_583x336.jpg" /> </td> <td> <img id="imageEvent3" src="http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Event-Images/Thibaudet-J_3_583x336.jpg" /> </td> </tr> <tr class="eventResultsTitles"> <td id="titleEvent1">Event Title</td> <td id="titleEvent2">Event Title</td> <td id="titleEvent3">Event Title</td> </tr> <tr class="eventResultsDates"> <td id="dateEvent1">Date</td> <td id="dateEvent2">Date</td> <td id="dateEvent3">Date</td> </tr> </table> <!--end of first 3 results--> <!--Maybe more results here--> <!-- restart button --> <div class="startButtonContainer restartButton"> <a class="pure-button button-cyo" id="cyoButton" href="http://www.sfsymphony.org/Buy-Tickets/Subscribe#panel-20152" target="blank"> <strong>Add to Your Subscription</strong> </a> </div> <!-- restart link button --> <p id="restartLink"> <a id="restartButton" href="#">Restart Wizard</a> </p> <!-- for showing point scores during testing--> <!--Maybe not needed--> <!--<div class="quizTextMiddle2 hide" id="resultsText"> <p id="attribute-orchestral">orch points here</p> <p id="attribute-chamber">chamber points here</p> <p id="attribute-recital">recital points here</p> <p id="attribute-band">band points here</p> </div>--> </div> <!----------------------> <!--NAVIGATION AREA--> <div class="quizNavigationContainer hide" id="quizNavigationContainer"> <a class="pure-button button-navigation" id="navBack" href="#"> <&nbsp;&nbsp; Back </a> <a class="pure-button button-navigation" id="navNext" href="#"> Next &nbsp;&nbsp;> </a> <a class="pure-button button-navigation hide" id="navSubmit" href="#"> submit </a> </div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SFS event match wizard (prototype v4) - Script Codes CSS Codes

{border: 1px dotted red}
/* GENERAL CSS */
#quizMainContainer { height: 750px; width: 690px; border: 1px solid gray; margin: 20px;
}
.quizTextMiddle { position: relative; top: 160px; height: 100px; text-align: center; padding: 0 100px 0 100px;
}
/* this holds the points */
.quizTextMiddle2 { *border: 1px dotted red; position: absolute; top: 20px; font-size: 10px; height: 140px; width: 690px; text-align: center; margin: 0 auto 0 auto;
}
.startButtonContainer { position: relative; top: 200px; height: 140px; text-align:center; padding: 0 60px 0 60px;
}
.restartButton { *border: 1px dotted red; top: 70px;
}
.questionImagesContainer { width: 690px; height: 220px; position: relative; margin: 0 auto 0 auto; top: 0; text-align:center;
}
.questionTextContainer { *border: 1px dotted red; position: inline-block; top: 60px; height: 30px; text-align: center; padding: 0 100px 0 100px; margin: 30px 0 30px 0;
}
.qText { display: inline-block; *border: 1px dotted red; max-width:400px;
}
.bigNumberDiv {	*border: 1px dotted red; width: 60px; height:60px; position: absolute; text-align:left;
}
.bigNumber { *border: 1px dotted red; position: absolute; font:28px arial; font-weight: initial; margin: 0; top: -12px;
}
.answersContainer { position: inline-block; top: 45px; height: auto; text-align:center; *padding: 0 60px 0 60px; padding: 0;
}
.quizNavigationContainer { *border: 1px dotted red; position: absolute; width: 300px; left: 220px; bottom: 75px;
}
/* IMAGE CSS */
.qImage{ width: 680px; height: 220px;
}
.imageMTT { background: url('https://i.imgur.com/JnsDFGy.jpg')
}
.imageBasses { background: url('https://i.imgur.com/Iljj8lF.jpg')
}
.imageMutter { background: url('https://i.imgur.com/u3beV56.jpg')
}
.imageMcFerrin { background: url('https://i.imgur.com/35js0TJ.jpg')
}
.imageApplause { background: url('https://i.imgur.com/2zcHmqk.jpg')
}
.imageAnswer { margin: 0 5px 4px 5px; width: 200px; height: 200px;
}
/* BUTTON CSS */
.button-initialize,
.button-answer,
.button-navigation,
.button-submit,
.button-cyo { border-radius: 2px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); margin: 7px 7px 7px 7px; width: 165px;
}
.button-initialize { background: rgb(67, 191, 5); color: white; border-radius: 4px; margin: 0;
}
#restartButton { position: relative; top: 60px;
}
.button-answer { background: rgb(60, 180, 215); color: white; margin: 4px 7px 12px 7px;
}
.button-navigation { background: rgb(222,222,222); border: 1px solid rgb(210,210,210); width: 100px; font-weight: bold; font-size: 15px; text-transform:uppercase;
}
.button-cyo { border-radius: 0; background: #288dcb; font-size: 20px; color: white; height: 40px; width: 300px; padding: 19px 0 0 0; margin: 0 0 0 0;
}
/* EVENT RESULTS CSS */
#resultsHeader { text-align: center; margin: 15px 0 0 0;
}
#resultsSubhead { text-align: center;
}
.eventResults { *border: 1px dotted red; position: relative; margin: 0 auto 0 auto; top: 10px; height: 180px; text-align: center;
}
.eventResults th, .eventResults td { *border: 1px dotted orange; padding:10px; height: 50px; max-width: 202px;
}
.eventResultsImages td img { width: 180px;
}
.moreEventResults { *border: 1px dotted red; position: relative; margin: 0 auto 0 auto; top: 135px; height: 180px; text-align: center;
}
.moreEventResults th, .moreEventResults td { *border: 1px dotted orange; padding:5px; width: 100px;
}
#restartLink { *border: 1px dotted red; font-size: 12px; text-align: center; width: 80px; height: 22px; margin: 0 auto 0 auto; position: relative;
}
#resultsText { top:40px;
}
.audioTable td { width: 340px; height: 300px; margin: 0 auto 0 auto;
}
.audioPlayer { *border: 1px dotted red; width: 300px; height: 30px; margin: 0 auto 3px auto; padding: 0px;
}
/* UTILITY CSS */
.hide { display:none;
}
.darkerBlue {	background: rgb(45, 155, 180);
}
.add_margin_top { margin-top: 30px;
}
.noMargin { margin: 0px;
}
.small_button_text { font-size: 12px;
}

SFS event match wizard (prototype v4) - Script Codes JS Codes

// NAVIGATION CODE
var navState = 0;
// calculates new nav state when back or next is clicked
function newNavState(currentNavState, direction) { if (direction==="back") { if (currentNavState > 0) { navState--; } else if(currentNavState === 0){ navState = 0; } } if (direction==="next") { if (currentNavState < 5) { navState++; } else if(currentNavState === 5){ navState = 5; } } return navState;
}
//show or hide nav buttons
function displaySubmit() { $('#navNext').addClass('hide'); $('#navSubmit').removeClass('hide');
}
function displayNext() { $('#navSubmit').addClass('hide'); $('#navNext').removeClass('hide');
}
function hideBack() { $('#navBack').addClass('hide');
}
function showBack() { $('#navBack').removeClass('hide');
}
// function to display nav update
function displayNavState(newNavState) { $('.questionWrap, .resultsPage').addClass('hide'); switch(newNavState) { case 0: $('#startPage').removeClass('hide'); $('#quizNavigationContainer').addClass('hide'); break; case 1: $('#question1').removeClass('hide'); $('#quizNavigationContainer').removeClass('hide'); break; case 2: $('#question2').removeClass('hide'); break; case 3: $('#question3').removeClass('hide'); displayNext(); break; case 4: $('#question4').removeClass('hide'); displaySubmit(); break; }
}
// nav click functions
$('#navBack').click(function () { newNavState(navState, "back"); displayNavState(navState);
});
$('#navNext').click(function () { newNavState(navState, "next"); displayNavState(navState);
});
// function to initialize quiz answers
function initializeAnswers() { $('.button-answer').removeClass('pure-button-active darkerBlue newSound story american international piano classics youngStars visual newSoundVisual americanStory pianoYoung storyVisual newSoundAmerican americanYoung pianoInternational');
}
// start quiz
$('#startButton, #restartButton').click(function() { console.log("Quiz has been started!"); initializeAnswers(); displayNavState(1); navState = 1; displayNext();
});
// display results page when submitted
function showResults() { console.log("quiz has been submitted!!!"); $('.questionWrap').addClass('hide'); $('#quizNavigationContainer').addClass('hide'); $('#resultsPage').removeClass('hide');
}
$('#navSubmit').click(function() { showResults();
});
//display activation when clicked
$('.button-answer').click(function (){ $(this).toggleClass('pure-button-active'); $(this).toggleClass('darkerBlue');
});
// EVENT OBJECTS
var allEventGroups = [ { groupTitle: 'A New Soundworld', groupSubhead: 'Consider these concerts for a new take on symphonic music.', groupAttr: ['newSound','newSoundVisual', 'newSoundAmerican'], groupScore: 0, eventImage_1: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/B/Bates-M_DJ_583x336.jpg', eventTitle_1: 'Mason Bates\'s <em>Aternative Energy</em>', eventDate_1: 'Sep 10&ndash;13', eventInfo_1: 'infohere', eventImage_2: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/A/Ades_583x336.jpg', eventTitle_2: 'Thomas Adès\'s <em>In Seven Days</em> [with video]', eventDate_2: 'Mar 5&ndash;7', eventInfo_2: 'infohere', eventImage_3: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/MTT/TilsonThomas_583x336.jpg', eventTitle_3: 'Cage\'s <em>Renga</em>', eventDate_3: 'May 16', eventInfo_3: 'infohere' }, { groupTitle: 'Storytellers', groupSubhead: 'Consider these concerts for a season of big drama.', groupAttr: ['story', 'americanStory', 'storyVisual'], groupScore: 0, eventImage_1: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/Z/Zacharias-C_1415_583x336.jpg', eventTitle_1: 'Copland\'s <em>Appalachian Spring</em>', eventDate_1: 'Oct 22&ndash;24', eventInfo_1: 'infohere', eventImage_2: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/MTT/MTT_583x336.jpg', eventTitle_2: 'Stravinsky\'s <em>The Soldier\'s Tale</em>', eventDate_2: 'Jan 16&ndash;18', eventInfo_2: 'infohere', eventImage_3: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/G/Gardiner_583x336.jpg', eventTitle_3: 'Monteverdi\'s <em>L\'Orfeo, favola in musica</em>', eventDate_3: 'Apr 27', eventInfo_3: 'infohere' }, { groupTitle: 'The American Sound with MTT', groupSubhead: 'Consider these concerts for a star-spangled season with MTT.', groupAttr: ['american','americanStory', 'newSoundAmerican', 'americanYoung'], groupScore: 0, eventImage_1: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/B/Bates-M_DJ_583x336.jpg', eventTitle_1: 'Mason Bates\'s <em>Aternative Energy</em>', eventDate_1: 'Sep 10&ndash;13', eventInfo_1: 'infohere', eventImage_2: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/MTT/MTT_583x336.jpg', eventTitle_2: 'John Adams\'s <em>Grand Pianola Music</em>', eventDate_2: 'Jan 16&ndash;18', eventInfo_2: 'infohere', eventImage_3: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/MTT/TilsonThomas_583x336.jpg', eventTitle_3: 'Bernstein\'s Symphony No. 2, <em>The Age of Anxiety</em>', eventDate_3: 'May 7&ndash;10', eventInfo_3: 'infohere' }, { groupTitle: 'International Orchestras', groupSubhead: 'Include these concerts, et voil&agrave;&mdash;a season of orchestras from across the globe.', groupAttr: ['international', 'pianoInternational'], groupScore: 0, eventImage_1: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/J/Jurowski-V_1415_583x336.jpg', eventTitle_1: 'Vladimir Jurowski and the London Philharmonic', eventDate_1: 'Oct 12&ndash;13', eventInfo_1: 'infohere', eventImage_2: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/F/Fischer-I_583x336.jpg', eventTitle_2: 'Iv&aacute;n Fischer and the Budapest Festival Orchestra', eventDate_2: 'Jan 25', eventInfo_2: 'infohere', eventImage_3: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/N/Nezet-Seguin-Y_583x336.jpg', eventTitle_3: 'Yannick Nézet-Séguin and the Rotterdam Philharmonic', eventDate_3: 'Feb 16', eventInfo_3: 'infohere' }, { groupTitle: 'Piano Lover', groupSubhead: 'Key in these concerts for a season of grand pianists.', groupAttr: ['piano', 'pianoYoung', 'pianoInternational'], groupScore: 0, eventImage_1: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/S/Schiff-A_583x336.jpg', eventTitle_1: 'András Schiff', eventDate_1: 'Oct 15, 22', eventInfo_1: 'infohere', eventImage_2: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/W/Wang-Y_583x336.jpg', eventTitle_2: 'Yuja Wang', eventDate_2: 'Mar 22&ndash;23', eventInfo_2: 'infohere', eventImage_3: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/T/Thibaudet-J_583x336.jpg', eventTitle_3: 'Jean-Yves Thibaudet', eventDate_3: 'May 7&ndash;10', eventInfo_3: 'infohere' }, { groupTitle: 'The Big Classics', groupSubhead: 'Consider these concerts for a season of classical hits.', groupAttr: ['classics'], groupScore: 0, eventImage_1: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/S/Salonen_583x336.jpg', eventTitle_1: 'Stravinsky\'s <em>The Firebird</em>', eventDate_1: 'Apr 30&ndash;May 3', eventInfo_1: 'infohere', eventImage_2: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/C/Chorus_583x336.jpg', eventTitle_2: 'Orff\'s <em>Carmina burana</em>', eventDate_2: 'May 17', eventInfo_2: 'infohere', eventImage_3: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/MTT/TilsonThomas_583x336.jpg', eventTitle_3: 'Beethoven\'s Fifth Symphony', eventDate_3: 'Jun 18, 27', eventInfo_3: 'infohere' }, { groupTitle: 'Bright Young Stars', groupSubhead: 'Consider these concerts for a season brimming with young talent.', groupAttr: ['youngStars', 'pianoYoung', 'americanYoung'], groupScore: 0, eventImage_1: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/W/Wang-Y_583x336.jpg', eventTitle_1: 'Yuja Wang', eventDate_1: 'Mar 22&ndash;23', eventInfo_1: 'infohere', eventImage_2: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/C/SaChen_583x336.jpg', eventTitle_2: 'Sa Chen', eventDate_2: 'Apr 23&ndash;24', eventInfo_2: 'infohere', eventImage_3: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/J/Jansen-J_583x336.jpg', eventTitle_3: 'Janine Jansen', eventDate_3: 'May 14&ndash;15', eventInfo_3: 'infohere' }, { groupTitle: 'The Visual Twist', groupSubhead: 'Video, staging, costumes&mdash;consider these traditional concerts, reimagined.', groupAttr: ['visual','newSoundVisual', 'storyVisual'], groupScore: 0, eventImage_1: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/A/Ades_583x336.jpg', eventTitle_1: 'Adès and Upshaw', eventDate_1: 'Mar 5&ndash;7', eventInfo_1: 'infohere', eventImage_2: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/MTT/TilsonThomas_583x336.jpg', eventTitle_2: 'American Maverick: John Cage', eventDate_2: 'May 16', eventInfo_2: 'infohere', eventImage_3: 'http://www.sfsymphony.org/SanFranciscoSymphony/media/Library/Artist-Images/H/Harvey-J_583x336.jpg', eventTitle_3: 'Beethoven\'s <em>Missa solemnis</em>', eventDate_3: 'Jun 10&ndash;13', eventInfo_3: 'infohere' }
];
var lengthAllEventGroups = allEventGroups.length; // for iterating through allEventGroups
// useful function for shuffling the allEvents array
function shuffleArray(o){ //v1.0 for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); return o;
}
// CALCULATE POINTS FOR ATTRIBUTES
// store attributes
var attrNamesArray = [ 'newSound', 'story', 'american', 'international', 'piano', 'classics', 'youngStars', 'visual', 'newSoundVisual', 'americanStory', 'pianoYoung', 'storyVisual', 'newSoundAmerican', 'americanYoung', 'pianoInternational'
];
var lengthAttrArray = attrNamesArray.length; // for iterating through attrNamesArray
var attributes = {};
function initializeAttributes () { for (i = 0; i < lengthAttrArray; i++) { var attrParam = attrNamesArray[i]; attributes[attrParam] = 0; }
}
initializeAttributes();
// toggle attribute class on answer click
$('.button-answer').click(function() { var buttonAttr = $(this).data("attr"); $(this).toggleClass(buttonAttr);
});
//count instances of classes and assigning to attribute parameters
$('#navSubmit').click(function() { for (i = 0; i < lengthAttrArray; i++) { var attrName = attrNamesArray[i]; attributes[attrName] = $("a." + attrName + "").length; }
});
// CALCULATE EVENT RANKING
var iterations = 0; // counter of loops
// calculate attribute points (this will apply to event ranking)
// TODO: can this looping be coded better to achieve less loops?
function sumAttributes(attr, attrScore) { for (i = 0; i < lengthAllEventGroups; i++) { iterations++ ; for(u = 0; u < allEventGroups[i].groupAttr.length; u++) { iterations++ ; if(attr === allEventGroups[i].groupAttr[u]) { allEventGroups[i].groupScore += attrScore; //console.log("ping!"); } else { } } }
}
// log scores
function logScores() { for (i = 0; i < allEventGroups.length; i++) { console.log(allEventGroups[i].groupTitle + " has score: " + allEventGroups[i].groupScore); }
}
// assign attr score to event scores
function assignGroupScores() { // TODO: need new code to iterate through attributes and have a list of attributes // looping through attributes list sumAttributes('newSound', attributes.newSound); sumAttributes('story', attributes.story); sumAttributes('american', attributes.american); sumAttributes('international', attributes.international); sumAttributes('piano', attributes.piano); sumAttributes('classics', attributes.classics); sumAttributes('youngStars', attributes.youngStars); sumAttributes('visual', attributes.visual); sumAttributes('newSoundVisual', attributes.newSoundVisual); sumAttributes('americanStory', attributes.americanStory); sumAttributes('pianoYoung', attributes.pianoYoung); sumAttributes('storyVisual', attributes.storyVisual); sumAttributes('newSoundAmerican', attributes.newSoundAmerican); sumAttributes('americanYoung', attributes.americanYoung); sumAttributes('pianoInternational', attributes.pianoInternational); console.log(iterations);
}
// TODO: working on this replacement function..
// assigning variables in the loop is causing problems..
/*function assignGroupScores() { for (i = 0; i < lengthAttrArray; i++) { //var attrName = attrNamesArray[i]; //var score = attributes[attrName]; //sumAttributes(attrName, score); //version with no variables sumAttributes(attrNamesArray[i], attributes[attrNamesArray[i]]); } console.log(iterations);
}*/
// initialize scores
function initializeEventScores() { for (i = 0; i < allEventGroups.length; i++) { allEventGroups[i].groupScore = 0; }
}
// RANK EVENTS IN NEW ARRAY
var eventsResults = [];
// function: push to eventsResults array from high score to low
function rankEventsResultsArray() { for(i = 10; i > -1; i--){ for (y = 0; y < allEventGroups.length; y++) { if (allEventGroups[y].groupScore === i){ eventsResults.push(allEventGroups[y]); } } } console.log(eventsResults);
}
// DISPLAY RANKING TO PAGE
// function: use ranked array to display results
function eventResultsDispay() { // header and subhead $('#resultsHeader').html(eventsResults[0].groupTitle); $('#resultsSubhead').html(eventsResults[0].groupSubhead); //images $('#imageEvent1').attr('src', eventsResults[0].eventImage_1); $('#imageEvent2').attr('src', eventsResults[0].eventImage_2); $('#imageEvent3').attr('src', eventsResults[0].eventImage_3); //titles $('#titleEvent1').html(eventsResults[0].eventTitle_1); $('#titleEvent2').html(eventsResults[0].eventTitle_2); $('#titleEvent3').html(eventsResults[0].eventTitle_3); //dates $('#dateEvent1').html(eventsResults[0].eventDate_1); $('#dateEvent2').html(eventsResults[0].eventDate_2); $('#dateEvent3').html(eventsResults[0].eventDate_3);
}
// SUBMISSION CODE
// do the scoring on submittion (should stay same with changes, check though)
$('#navSubmit').click(function() { assignGroupScores(); logScores(); rankEventsResultsArray(); eventResultsDispay();
});
//restart initializes event scores
$('#startButton, #restartButton').click(function() { console.log(allEventGroups); initializeEventScores(); initializeAttributes(); logScores(); console.log(attributes); // radomizes initial allEvents array shuffleArray(allEventGroups); //initializes eventsResults array.. eventsResults = []; // initialize loop counter.. iterations = 0;
});
// OTHER STUFF
// show more results
// will we be showing additional results???
/*$('#showMoreRes').click(function() { $('.moreEventResults').removeClass('hide'); $(this).addClass('hide'); $('#showLessRes').removeClass('hide');
});
//show less results
$('#showLessRes').click(function() { $('.moreEventResults').addClass('hide'); $(this).addClass('hide'); $('#showMoreRes').removeClass('hide');
});*/
SFS event match wizard (prototype v4) - Script Codes
SFS event match wizard (prototype v4) - Script Codes
Home Page Home
Developer Harry Sadler
Username harrysadlermusic
Uploaded November 29, 2022
Rating 3
Size 8,689 Kb
Views 8,096
Do you need developer help for SFS event match wizard (prototype v4)?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Harry Sadler (harrysadlermusic) Script Codes
Name
Item design 2
Change Table Cells with Slider
SFS Secret Store
JS for card game
Forked to learn rotateY
Audio Button example
A hover effect
A hover effect SFS draft
SFS hover cross-browser testing
Secret Store - item filter v2
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!