Skip to content

Instantly share code, notes, and snippets.

@willwade

willwade/fiddle.css

Last active August 29, 2015 14:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save willwade/697704fbae5f05c8f542 to your computer and use it in GitHub Desktop.
Save willwade/697704fbae5f05c8f542 to your computer and use it in GitHub Desktop.
Download ZIP
SpeechBubble Front page "Quick" Search demo. Note the comments on how these elements map to the item fields. The thinking that a general search form like this should allow someone to get down to 10 or 20 so items which they then need to look at the specific details themselves.. From the top page we also want to give folk a chance to search Devic…
Raw
fiddle.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* -------------- END CSS RESET -------------- */
/* -- START OOCSS -- */
header, footer, article, section, nav, menu, hgroup {
display: block;
}
.left {
float:left;
}
.right {
float:right;
}
.clear {
clear:both
}
a.mm {
position:fixed;
bottom:10px;
right:10px;
width:30px;
height:30px;
display:block;
}
footer {
position: fixed;
bottom: 2em;
left: 5%;
}
footer p{
font-size: .75em;
text-align: center;
}
h1, h2, h3, h4, h5, h6 {
margin: 1em 0 0.5em;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.375em;
}
h3 {
font-size: 1.125em;
}
h4 {
font-size: 1em;
}
h5 {
font-size: 0.875em;
}
h6 {
font-size: 0.75em;
}
#page_container p {
font-size: .75em;
margin: 0 0 0.5em 0;
}
/* -- END OOCSS -- */
body {
color:#606060;
font-family: Arial, Helvetica, sans-serif;
}
#page_container {
width: 500px;
margin: 5em auto 0;
background: #FFFFFF;
padding: 1em;
box-shadow: 0 3px 0px #eeeeee;
}
form {
padding: 0.5em 0;
margin: 1.5em 0;
border-top: 1px dashed #CCCCCC;
}
.sub-questions {
margin: 0 0 1.5em 1em;
padding: 0 0 0 1em;
border-left: 1px solid #cccccc;
}
.sub-sub-questions {
margin: 0 0 2em 1em;
padding: 0 0 0 2em;
border-left: 1px solid #cccccc;
}
.sub-sub-sub-questions {
margin: 0 0 2.5em 1em;
padding: 0 0 0 3em;
border-left: 1px solid #cccccc;
}
/* -- START MAIN CSS -- */
Raw
fiddle.html
<body>
<div id="page_container">
<h1>SpeechBubble Search Demo</h1>
<p>Please answer the questions and the Lyndon magic will merge your answers with the backend form fields </p>
<form method="post" action="#">
<p>
<label>Do you want options that provide pre-created/organised vocabulary?</label> <br />
<input class="premadevocab" type="radio" name="premadevocab" value="Yes" />Yes <input class="premadevocab" type="radio" name="premadevocab" value="No" />No <br />
<!-- IF Y = Search anything that has a vocabulary. If N = Anything else. -->
</p>
<p>
<label>How will the user access the device?</label> <br />
<input class="access" type="radio" name="access" value="touch" />Touch
<input class="access" type="radio" name="access" value="mouse" />Mouse or mouse alternative e.g. Joystick
<input class="access" type="radio" name="access" value="eyegaze" />Eyegaze
<input class="access" type="radio" name="access" value="switch" />Switch
<!-- This should be pretty explanatory. Any items with these access solutions checked. -->
</p>
<p>
<label>Are there any other extra features which are required?</label> <br />
<input type="checkbox" name="device-features-dedicated" />Dedicated
<input type="checkbox" name="device-features-mobilephone" />Mobile phone integration
<input type="checkbox" name="device-features-compcontrol" />Computer control
<input type="checkbox" name="device-features-switch" />Send to 2nd screen
<input type="checkbox" name="device-features-ec" />Environmental Control
<!--
Alll of these items are at the device level
-->
</p>
</form>
<p><h2>Alternatively... </h2>
<p>You can also search the site on the different options available: <br />
<a href="#Devices">Devices</a> | <a href="#Software">Software</a> | <a href="#Vocabulary">Vocabulary</a>
</p>
<div class="clearfix"></div>
</div>
<!-- FOOTER -->
</body>
Raw
fiddle.js
$(function(){
//http://www.mediamilan.com/tutos/conditional-form-using-jquery/
$vocab = "<div class='sub-questions option_one'><p> \
<label>How should the vocabulary primarily be presented?</label> <br /> \
<input class='presentation' type='radio' name='presentation' value='Text' />Text only \
<input class='presentation' type='radio' name='presentation' value='Symbols' />Symbols or Photos only \
<input class='presentation' type='radio' name='presentation' value='TextAndSymbols' />Text and Symbols or Photos \
</p></div>"
/*
These all relate to Vocabularies.
*/
$novocab = "<div class='sub-questions option_one'><p> \
<label>Should language be presented with:</label> <br /> \
<input class='presentationbasic' type='radio' name='presentationbasic' value='Text' />Text only \
<input class='presentationbasic' type='radio' name='presentationbasic' value='Symbols' />Symbols or Photos \
<input class='presentationbasic' type='radio' name='presentationbasic' value='Audiitory' />Auditory \
</p></div>"
/*
This is largely related to Devices: Simple and Basic. I need to check what we put in the database though that we can pull this info out
I think its also in Software.
*/
$text = "<div class='sub-sub-questions option_one'> \
<label>How should the text be primarily be presented?</label> \
<p><input class='txtrep' type='radio' name='txtrep' value='Keyboard' />Keyboard \
<input class='txtrep' type='radio' name='txtrep' value='SingleWords' />Single Words \
<input class='txtrep' type='radio' name='txtrep' value='Phrases' />Phrases</p> \
</div>";
/*
Ok - all straight forward matching to Vocab
*/
$keyboard = "<div class='sub-sub-sub-questions option_one'> \
<label>Should the Vocabulary allow for abbreviation expansion?</label> \
<p><input type='checkbox' class='keyboard' name='keyboard' />Yes</p> \
<label>Should it allow for word prediction?</label> \
<p><input type='checkbox' class='wordpred' name='wordpred'/>Yes</p> \
</div>";
/*
ditto
*/
$singlewords = "<div class='sub-sub-sub-questions option_one'> \
<label>Does the vocabulary present words that are linked to other related words on selecting them (e.g. I press 'go to' and the system presents places)?</label> \
<p><input type='checkbox' />Yes</p> \
<label>How are the words orgamised across the vocabulary?</label> \
<p><input class='wdorganisation' type='radio' name='wdorganisation' value='Schematicall' />Schematically \
<input class='wdorganisation' type='radio' name='wdorganisation' value='SingleWords' />Taxonomically \
<input class='wdorganisation' type='radio' name='wdorganisation' value='SimMeaning' />Similar meaning locations </p> \
</div>";
/*
ditto
*/
$phrases = "<div class='sub-sub-sub-questions option_one'> \
<label>Does the vocabulary present phrases that are linked to other related phrases on selecting them (e.g. I press 'go to' and the system presents places)?</label> \
<p><input type='checkbox' />Yes</p> \
<label>How are the phrases orgamised across the vocabulary?</label> \
<p><input class='phraseorganisation' type='radio' name='phraseorganisation' value='Schematically' />Schematically \
<input class='phraseorganisation' type='radio' name='phraseorganisation' value='SingleWords' />Taxonomically \
<input class='phraseorganisation' type='radio' name='phraseorganisation' value='SimMeaning' />Similar meaning locations </p> \
</div>";
/*
ditto
*/
$symbols = "<div class='sub-sub-questions option_one'> \
<p><label>Do you require any specific symbol set?</label> \
<select id='myList'><option value = '0'>Any symbol set is fine</option><option value = '1'>PCS</option><option value = '2'>Widgit</option><option value = '3'>SymbolStix</option><option value = '3'>More..</option></select></p> \
<label>On the top/home page how is language primarily organised?</label> \
<p><input type='radio' class='toplangpres' name='toplangpres' value='singwords'/>Singular words \
<input type='radio' class='toplangpres' name='toplangpres' value='phrases' />Phrases / Sentence Starters (e.g. I want..) \
<input type='radio' class='toplangpres' name='toplangpres' value='cats'/>Categories only \
<input type='radio' class='toplangpres' name='toplangpres' value='other'/>Other</p> \
<label>On secondary pages how is language primarily organised?</label> \
<p><input type='radio' class='lowlangpres' name='lowlangpres' value='singwords'/>Singular words \
<input type='radio' class='lowlangpres' name='lowlangpres' value='phrases' />Phrases / Sentence Starters (e.g. I want..) \
<input type='radio' class='lowlangpres' name='lowlangpres' value='cats'/>Visual Scenes \
<input type='radio' class='lowlangpres' name='lowlangpres' value='other'/>Other</p> \
</div>";
/*
ditto
*/
$touch = "<div class='sub-questions option_two'> \
<label>Do you require specially made keyguards?</label> \
<p><input type='checkbox' />Yes <br /> \
<label>Do you require any specific touch features?</label> \
<p><input type='checkbox' />Accept on Enter <input type='checkbox' /> Accept on Exit <input type='checkbox' /> Hold time<input type='checkbox' />Debounce<input type='checkbox' />Auditory fishing <input type='checkbox' />Other\
</p> \
\
<p><label>What is the minimum target size?</label> \
<select id='myList'><option value = '1'>Small (less than 5cm square)</option><option value = '2'>Mediun (5-8cm)</option><option value = '3'>Large (8-10cm)</option><option value = '3'>Very Large (10cm+)</option></select></p> \
</div>";
/*
Keyguards: Access-Vocabs
Touch features: Acces-Device, Access-Vocab and Access-Software
Min target size: Access-Vocab
*/
$mouse = "<div class='sub-questions option_two'> \
<p><label>What is the minimum target size?</label> \
<select id='myList'><option value = '1'>Small (less than 5cm square)</option><option value = '2'>Mediun (5-8cm)</option><option value = '3'>Large (8-10cm)</option><option value = '3'>Very Large (10cm+)</option></select></p> \
</div>";
/*
This should map to access across all areas
*/
$eyegaze = "<div class='sub-questions option_two'> \
<label>Do you require an off-screen pause?</label> \
<p><input type='radio' name='eyepause' />On-Screen Pause</p> \
<p><input type='radio' name='eyepause' />Off-screen Pause</p> \
\
<p><label>What is the minimum target size?</label> \
<select id='myList'><option value = '1'>Small (less than 5cm square)</option><option value = '2'>Mediun (5-8cm)</option><option value = '3'>Large (8-10cm)</option><option value = '3'>Very Large (10cm+)</option></select></p> \
</div>";
/*
ditto
*/
$switch = "<div class='sub-questions option_two'> \
<label>Do you require any specific scanning interfce?</label> \
<p><input type='checkbox' />Crosshair <input type='checkbox' />Column Row <input type='checkbox' />Row Column <input type='checkbox' />Block <input type='checkbox' />Quartered <input type='checkbox' />Morse <input type='checkbox' />Auditory Cues</p> \
\
</div>";
/*
ditto
*/
$('.premadevocab').change( function(){
if($(this).val() == "Yes"){
$('.option_one').remove();
$(this).parent().after($vocab);
} else if($(this).val() == "No"){
$('.option_one').remove();
$(this).parent().after($novocab);
}
});
$('.presentation').live( "change", function(){
if($(this).val() == "Text"){
$('.sub-sub-questions').remove();
$(this).parent().after($text);
} else if($(this).val() == "Symbols"){
$('.sub-sub-questions').remove();
$(this).parent().after($symbols);
}
});
$('.txtrep').live( "change", function(){
if($(this).val() == "Keyboard"){
$('.sub-sub-sub-questions').remove();
$(this).parent().after($keyboard);
} else if($(this).val() == "SingleWords"){
$('.sub-sub-sub-questions').remove();
$(this).parent().after($singlewords);
} else if($(this).val() == "Phrases"){
$('.sub-sub-sub-questions').remove();
$(this).parent().after($phrases);
}
});
$('.access').live("change", function(){
if($(this).val() == "touch"){
$('.option_two').remove();
$(this).parent().after($touch);
} else if($(this).val() == "mouse"){
$('.option_two').remove();
$(this).parent().after($mouse);
} else if($(this).val() == "eyegaze"){
$('.option_two').remove();
$(this).parent().after($eyegaze);
} else if($(this).val() == "switch"){
$('.option_two').remove();
$(this).parent().after($switch);
}
});
$('.device-features').live("change", function(){
if($(this).val() == "touch"){
$('.option_two').remove();
$(this).parent().after($touch);
} else if($(this).val() == "mouse"){
$('.option_two').remove();
$(this).parent().after($mouse);
} else if($(this).val() == "eyegaze"){
$('.option_two').remove();
$(this).parent().after($eyegaze);
} else if($(this).val() == "switch"){
$('.option_two').remove();
$(this).parent().after($switch);
}
});
});
Raw
fiddle.manifest
name: Search.html. SpeechBubble search demo
description: Demo of the SpeechBubble search demo
authors:
- Will Wade
resources:
- http://code.jquery.com/jquery-1.4.4.min.js
normalize_css: no
@willwade
Copy link
Author

willwade commented Jan 6, 2015

http://jsfiddle.net/gh/gist/jquery/1.4.4/697704fbae5f05c8f542/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment