Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: I-Chin widget

  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts

    I-Chin widget

    Styleable I-Ching widget.

    Diplays logogram, hexagram and information for oracular statements for two random coins taken from a bag of 8 distinct coins.
    R. Wilhelm and modern interpretations are provided along with a state relavent link to wikipedia.

    Don't forget to save the file as utf-8 text.

    Almost forgot, shows one way to make a one-shot function: execute function body and remove self.
    means 1 call to dailyiching is OK, 2 calls(+) is an error.

    Code:
    <!doctype html>
    <html>
    <head>
    <title>
    Daily I-Ching
    </title>
    <style type='text/css'>
    /*style class .dailyiching (ie,ff,chrome,opera)*/
    .dailyiching {border:solid 1px #072556;width:350px;-moz-border-radius: 0em 0em .5em .5em;border-radius: 0em 0em .5em .5em;background:#276596;color:#fff;padding:3px;}
    .dailyiching table {border:solid 1px #072556;width:175px;-moz-border-radius: 0em 0em .5em .5em;border-radius: 0em 0em .5em .5em;}
    .dailyiching caption {font:normal bold 14px/14px Trebuchet MS, Geneva, sans-serif;border:solid 1px #072556;border-bottom:none;padding:5px;line-height:1.3em;
    	-moz-border-radius: .5em .5em 0em 0em;border-radius: .5em .5em 0em 0em;background:#276596;}
    .dailyiching td {font:normal normal 12px/12px Trebuchet MS, Geneva, sans-serif;}
    .dailyiching a {color:#ff0;font-weight:bold;}
    /*style class .dailyichingmac (safari)*/
    .dailyichingmac {border:solid 1px #072556;width:350px;-moz-border-radius: 0em 0em .5em .5em;border-radius: 0em 0em .5em .5em;background:#276596;color:#fff;padding:3px;}
    .dailyichingmac caption {width:350px;font:normal bold 14px/14px Trebuchet MS, Geneva, sans-serif;border:solid 1px #072556;border-bottom:none;padding:5px;
    	line-height:1.3em;-moz-border-radius: .5em .5em 0em 0em;border-radius: .5em .5em 0em 0em;background:#276596;}
    .dailyichingmac table {border:solid 1px #072556;width:160px;-moz-border-radius: 0em 0em .5em .5em;border-radius: 0em 0em .5em .5em;}
    .dailyichingmac table caption {width:160px;font:normal bold 14px/14px Trebuchet MS, Geneva, sans-serif;border:solid 1px #072556;border-bottom:none;padding:5px;
    	line-height:1.3em;-moz-border-radius: .5em .5em 0em 0em;border-radius: .5em .5em 0em 0em;background:#276596;}
    .dailyichingmac td {font:normal normal 12px/12px Trebuchet MS;}
    .dailyichingmac a {color:#ff0;font-weight:bold;}
    </style>
    <script>
    (function(){
    	//data from http://en.wikipedia.org/wiki/I_Ching.
    	var eid = arguments[0];
    	function ostated(){ //Oracular Statement.
    		if(arguments.length==13){
    			this.name = arguments[0];
    			this.logogram = arguments[1];
    			this.symbol = arguments[2];
    			this.bianry = arguments[3];
    			this.decimal = arguments[4];
    			this.translation = arguments[5];
    			this.nature = arguments[6];
    			this.direction = arguments[7];
    			this.relation = arguments[8];
    			this.bodypart = arguments[9];
    			this.attribute = arguments[10];
    			this.state = arguments[11];
    			this.animal = arguments[12];
    		}else if(arguments.length==7){
    			this.symbol = arguments[0];
    			this.eng = arguments[1];
    			this.name = arguments[2];
    			this.logogram = arguments[3];
    			this.decimal = arguments[4];
    			this.RWilhelm = arguments[5];
    			this.modern = arguments[6];
    		}else{
    			return false;
    		}
    	}
    	var coin=[
    		{symbol:"", value:0},
    		{symbol:"|", value:1}
    	];
    	var iching=[
    		new ostated("kn","坤","","000",0,["the Receptive","Field"],["earth"],"southwest","mother","belly",["devoted","yeilding"],["receptive"],["cow"]),
    		new ostated("zhn","震","|","100",1,["the Arousing","Shake"],["thunder"],"east","first son","foot",["inciting movement"],["initiative"],["horse"]),
    		new ostated("kǎn","坎","|","010",2,["the Abysmal","Gorge"],["water"],"north","second son","ear",["dangerous"],["in-motion"],["pig"]),
    		new ostated("du","兌","||","110",3,["the Joyous","Open"],["swamp","marsh"],"west","third daughter","mouth",["pleasure"],["tranquil"],["sheep"]),
    		new ostated("gn","艮","|","001",4,["Keeping Still","Bound"],["mountain"],"northeast","third son","hand",["resting","stand-still"],["completion"],["wolf","dog"]),
    		new ostated("l","離","||","101",5,["the Clinging","Radiance"],["fire"],"south","second daughter","eye",["light-giving","dependence"],["clinging","clarity","adaptable"],["pheasant"]),
    		new ostated("xn","巽","||","011",6,["the Gentle","Ground"],["wind"],"southeast","first daughter","thigh",["penetrating"],["gentle entrance"],["fowl"]),
    		new ostated("qin","乾","|||","111",7,["the Creative","Force"],["heaven","sky"],"northwest","father","head",["strong"],["creative"],["dragon"])
    	];
    	var hexagram=[
    		new ostated("","Field","kn","困",2,"The Receptive","Needing Knowledge & Skill; Do not force matters and go with the flow"),
    		new ostated("|","Returning","f","復",24,"Return","Returning"),
    		new ostated("|","Leading","shi","師",6,"The Army","Bringing Together, Teamwork"),
    		new ostated("||","Nearing","ln","臨",19,"Approach","Approaching Goal, Arriving"),
    		new ostated("|","Humbling","qiān","謙",15,"Modesty","Being Reserved, Refraining"),
    		new ostated("||","Brightness Hiding","mng y","明夷",36,"Darkening of the Light","Brilliance Injured"),
    		new ostated("||","Ascending","shēng","升",46,"Pushing Upward","Growing Upward"),
    		new ostated("|||","Pervading","ti","泰",11,"Peace","Pervading"),
    		new ostated("|","Providing-For","y","豫",16,"Enthusiasm","Inducement, New Stimulus"),
    		new ostated("||","Shake","zhn","震",51,"Arousing","Mobilizing"),
    		new ostated("||","Taking-Apart","xi","解",40,"Deliverance","Liberation, Solution"),
    		new ostated("|||","Converting The Maiden","guī mi","歸妹",54,"The Marrying Maiden","Marrying"),
    		new ostated("||","Small Exceeding","xiǎo gu","小過",62,"Small Preponderance","Small Surpassing"),
    		new ostated("|||","Abounding","fēng","豐",55,"Abundance","Goal Reached, Ambition Achieved"),
    		new ostated("|||","Persevering","hng","恆",57,"Duration","Perseverance"),
    		new ostated("||||","Great Invigorating","d zhung","大壯",34,"Great Power","Great Boldness"),
    		new ostated("|","Grouping","bi","比",8,"Holding Together","Union"),
    		new ostated("||","Sprouting","zhun","屯",3,"Difficulty at the Beginning","Sprouting"),
    		new ostated("||","Gorge","kǎn","坎",29,"The Abysmal Water","Darkness, Gorge"),
    		new ostated("|||","Articulating","ji","節",60,"Limitation","Discipline"),
    		new ostated("||","Limping","jin","漸",39,"Obstruction","Halting, Hardship"),
    		new ostated("|||","Already Fording","j j","既濟",63,"After Completion","Completion"),
    		new ostated("|||","Welling","jǐng","井",48,"The Well","Replenishing, Renewal"),
    		new ostated("||||","Attending","xu","需",5,"Waiting","Uninvolvement (Wait for now), Nourishment"),
    		new ostated("||","Clustering","cu","萃",45,"Gathering Together","Association, Companionship"),
    		new ostated("|||","Following","su","隨",17,"Following","Following"),
    		new ostated("|||","Confining","kn","坤",47,"Oppression","Exhaustion"),
    		new ostated("||||","Open","du","兌",58,"The Joyous","Overt Influence"),
    		new ostated("|||","Conjoining","xin","咸",31,"Influence","Attraction"),
    		new ostated("||||","Skinning","g","革",49,"Revolution","Abolishing the Old"),
    		new ostated("||||","Great Exceeding","d gu","大過",28,"Great Preponderance","Great Surpassing"),
    		new ostated("|||||","Parting","gui","夬",43,"Breakthrough","Separation"),
    		new ostated("|","Stripping","bō","剝",23,"Splitting Apart","Stripping, Flaying"),
    		new ostated("||","Swallowing","y","益",27,"Mouth Corners","Seeking Nourishment"),
    		new ostated("||","Enveloping","mng","蒙",4,"Youthful Folly","Detained, Enveloped and Inexperienced"),
    		new ostated("|||","Diminishing","sǔn","損",41,"Decrease","Decrease"),
    		new ostated("||","Bound","gn","艮",52,"The Keeping Still","Immobility"),
    		new ostated("|||","Adorning","b","賁",22,"Grace","Embellishing"),
    		new ostated("|||","Corrupting","gŭ","蠱",18,"Work on the Decayed","Repairing"),
    		new ostated("||||","Great Accumulating","d ch","大畜",26,"Great Taming","Accumulating Wisdom"),
    		new ostated("||","Prospering","jn","晉",35,"Progress","Expansion, Promotion"),
    		new ostated("|||","Gnawing Bite","sh k","噬嗑",21,"Biting Through","Deciding"),
    		new ostated("|||","Not-Yet Fording","wi j","未濟",64,"Before Completion","Incompletion"),
    		new ostated("||||","Polarising","ku","睽",60,"Opposition","Division, Divergence"),
    		new ostated("|||","Sojourning","lǚ","旅",56,"The Wanderer","Travel"),
    		new ostated("||||","Radiance","l","離",30,"The Clinging","Clinging, Attachment"),
    		new ostated("||||","Holding","dǐng","鼎",50,"The Cauldron","Establishing the New"),
    		new ostated("|||||","Great Possessing","d you","大有",14,"Great Possession","Independence, Freedom"),
    		new ostated("||","Viewing","guān","觀",20,"Contemplation","The Withholding"),
    		new ostated("|||","Augmenting","y","頤",42,"Increase","Increase"),
    		new ostated("|||","Dispersing","hun","渙",59,"Dispersion","Dispersal"),
    		new ostated("||||","Centre Confirming","zhōng f","中孚",61,"Inner Truth","Staying Focused, Avoid Misrepresentation"),
    		new ostated("|||","Infiltrating","jiǎn","蹇",53,"Development","Auspicious Outlook, Infiltration"),
    		new ostated("||||","Dwelling People","jiā rn","家人",37,"The Family","Family"),
    		new ostated("||||","Ground","xn","巽",57,"The Gentle","Subtle Influence"),
    		new ostated("|||||","Small Accumulating","xiao ch","小畜",9,"Small Taming","Accumulating Resources"),
    		new ostated("|||","Obstruction","pi","否",12,"Standstill","Stagnation"),
    		new ostated("||||","Without Embroiling","w wng","無妄",25,"Innocence","Without Rashness"),
    		new ostated("||||","Arguing","sng","訟",6,"song","Conflict Engagement in Conflict"),
    		new ostated("|||||","Treading","lu","履",10,"Treading (Conduct)","Continuing with Alertness"),
    		new ostated("||||","Retiring","dn","遯",33,"Retreat","Withdrawing"),
    		new ostated("|||||","Concording People","tng rn","同人",13,"Fellowship","Fellowship, Partnership"),
    		new ostated("|||||","Coupling","gu","姤",44,"Coming to","Meet Encountering"),
    		new ostated("||||||","Force","qin","乾",1,"The Creative","Possessing Creative Power & Skill")
    	];
    	function rnd(n){
    		return n[Math.floor(Math.random()*n.length)];
    	}
    	function tossCoin(){
    		return rnd(coin)
    	}
    	function throwCoins(){
    		var value = 0;
    		for(var i=0;i<3;i++){
    			var d = tossCoin();
    			value+=Math.pow(2, i*d.value)
    		}
    		return iching[value];
    	}
    	function throwHexagram(){
    		var c1 = throwCoins();
    		var c2 = throwCoins();
    		return {
    			lowerTrigram:c1,
    			upperTrigram:c2
    		}
    	}
    	function writeit(){
    		var cssclassname='dailyiching';
    		if(window.CSSVariablesRule) cssclassname+="mac";
    		var hg = throwHexagram();
    		var lt = hg.lowerTrigram;
    		var ut = hg.upperTrigram;
    		var v1 = lt.decimal;
    		var v2 = ut.decimal;
    		var v3 = 8*v2;
    		var v4 = v1 + v3 - 0;
    		var v5 = 64 - v4;
    		var s ="<table class='"+cssclassname+"'><caption>"
    			+ "* "+lt.logogram+" ("+lt.name+") "+ut.logogram+" ("+ut.name+") *<br>"
    			+ "Hexagram: " + lt.symbol + " " + ut.symbol
    			+ "</caption><tr><td>"
    			+ "<table><caption>Inner Aspect: "+lt.symbol+"<br>("+lt.name+") "+rnd(lt.translation)+"</caption>"
    			+ "<tr><td>Nature:</td><td>"+rnd(lt.nature)+"</td></tr>"
    			+ "<tr><td>Direction:</td><td>"+lt.direction+"</td></tr>"
    			+ "<tr><td>Relation:</td><td>"+lt.relation+"</td></tr>"
    			+ "<tr><td>Body Part:</td><td>"+lt.bodypart+"</td></tr>"
    			+ "<tr><td>Attribute:</td><td>"+rnd(lt.attribute)+"</td></tr>"
    			+ "<tr><td>State:</td><td>"+rnd(lt.state)+"</td></tr>"
    			+ "<tr><td>Animal:</td><td>"+rnd(lt.animal)+"</td></tr>"
    			+ "</table>"
    			+ "</td><td>"
    			+ "<table><caption>Outer Aspect: "+ut.symbol+"<br>("+ut.name+") "+rnd(ut.translation)+"</caption>"
    			+ "<tr><td>Nature:</td><td>"+rnd(ut.nature)+"</td></tr>"
    			+ "<tr><td>Direction:</td><td>"+ut.direction+"</td></tr>"
    			+ "<tr><td>Relation:</td><td>"+ut.relation+"</td></tr>"
    			+ "<tr><td>Body Part:</td><td>"+ut.bodypart+"</td></tr>"
    			+ "<tr><td>Attribute:</td><td>"+rnd(ut.attribute)+"</td></tr>"
    			+ "<tr><td>State:</td><td>"+rnd(ut.state)+"</td></tr>"
    			+ "<tr><td>Animal:</td><td>"+rnd(ut.animal)+"</td></tr>"
    			+ "</table>"
    			+ "</td></tr><tr><td colspan='2'>"
    			+ "Modern Translation: " + "("+hexagram[v4].eng+") "+ hexagram[v4].modern
    			+ "<br><br>(Wikipedia: <a href='http://en.wikipedia.org/wiki/I_Ching_hexagram_"+hexagram[v4].decimal+"#Hexagram_"+hexagram[v4].decimal+"' target='_blank'>"+hexagram[v4].decimal+"</a>) "+hexagram[v4].symbol
    			+ "<div style='float:right;'>"+hexagram[v4].logogram+" ("+hexagram[v4].name+")</div>"
    			+ "</td></tr></table>";
    		return(s);
    	}
    	//one shot.
    	window["dailyiching"]=function(){document.write(writeit());delete window["dailyiching"];}
    })();
    </script>
    </head>
    <body>
    <div id="optionalContainer">
    <script>dailyiching();</script>
    </div>
    </body>
    </html>
    tested in ie,ff,safari,opera. tested in chrome prior to 3/1/12
    Last edited by rdspoons; 03-02-2012 at 01:56 AM. Reason: added one-shot verbiage to preamble.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,609
    Thanks
    0
    Thanked 645 Times in 635 Posts
    You might consider substituting the unicode values for those characters not part of the usual JavaScript characterset i \u9999 format - that way it is not as relaint on character encoding.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •