leaves try out

I

II

III

IV

V

VI

VII

How to make growing plants javascript in blogger post in 5 minutes

Back>

The key is you need to change size of stem and leaves with animation.

Example

<div class="drop">
</div>
<div class="w3-container">
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="box">
<div class="stem">
<div class="leaf leaf01">
<div class="line">
</div>
</div>
<div class="leaf leaf02">
<div class="line">
</div>
</div>
<div class="leaf leaf03">
<div class="line">
</div>
</div>
<div class="leaf leaf04">
<div class="line">
</div>
</div>
<div class="leaf leaf05">
<div class="line">
</div>
</div>
<div class="leaf leaf06">
<div class="line">
</div>
</div>
</div>
</div>
</div>
</div>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<style>
.wrapper {
    width:51px;
    display:block;
    float: right;
}

.box {
 position:relative;
 margin:auto;
 display:block;
 margin-top:8%;
 width:300px;
 height:200px;
 background:none;
}

.stem {
 position:absolute;
 width:1%;
 height:1%;
 left:49%;
 bottom:0%;
 background:#70B77E;
}

.leaf {
 position:absolute;
 width:700%;
 height:10%;
 border-radius:50%;
 background:#70B77E;
}

.leaf .line {
 position:absolute;
 width:80%;
 height:1%;
 background:rgba(0,0,0,0.1);
 top:48%;
}

.leaf01 {
 top:70%;
 left:50%;
 transform:rotate(-25deg);
}

.leaf02 {
 top:50%;
 right:50%;
 transform:rotate(205deg);
}

.leaf03 {
 top:30%;
 left:50%;
 transform:rotate(-25deg);
}

.leaf04 {
 top:20%;
 right:50%;
 transform:rotate(205deg);
} 

.leaf05 {
 top:-17%;
 left:-120%;
 transform:rotate(-60deg);
}

.leaf06 {
 top:-9%;
 right:22%;
 transform:rotate(195deg);
}

/* --- ANIMATION --- */

.stem, .leaf {
 animation-duration: 1.2s!important;
 animation-fill-mode:forwards;
} 

.stem.rain {
 animation: grow 1s linear 1;
}

@keyframes grow {
 0% {
  bottom:0%;
  width:1%;
  height:10%;
 }

 100% {
  bottom:0%;
  width:3%;
  height:100%;
 }
}

.stem.rain .leaf {
 animation: leafGrow 1s linear 1;
 animation-fill-mode:forwards;
}

@keyframes leafGrow {
 0% {
  width:0%;
  height:0%;
 }

 100% {
  width:700%;
  height:10%;
 }
}

.stem.rain .leaf05 {
 animation: topLeafRight 1s linear 1;
}

@keyframes topLeafRight {
 0% {
  top:5%;
  width:0%;
  height:0%;
  left:10%;
 }

 100% {
  width:700%;
  height:10%;
  top:-17%;
  left:-120%;
 }
}

.stem.rain .leaf06 {
 animation: topLeafLeft 1s linear 1;
}

@keyframes topLeafLeft {
 0% {
  top:0%;
  width:0%;
  height:0%;
 }

 100% {
  width:700%;
  height:10%;
  top:-9%;
 }
} 

.drop {
 position:absolute;
 top:30px;
 left:20px;
 width: 50px;
 height: 50px;
 border: none;
 -webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
 border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
 font: normal 100%/normal Arial, Helvetica, sans-serif;
 background:#17BEBB;
 -webkit-transform: rotateZ(-45deg)   ;
 transform: rotateZ(-45deg)   ;
 -webkit-transform-origin: 50% 50% 0;
 transform-origin: 50% 50% 0;
 animation:rain 2s linear 1;
 animation-fill-mode:forwards;
 cursor:pointer;
 z-index:9999;
}
</style>

<script>
$(".drop").click(function() {
 $(".stem").addClass("rain");
  setTimeout(function () {
  $('.stem').removeClass('rain');
 }, 1200); 
});
</script>

How to dynamically change nodes for Treant.js in 5 minutes

Back>

Treant.js allows you to create good presentation of tree data structure. It will be more useful if you can dynamically change the tree structure.

Here is a solution that works.
You first need to create the json string (you can iterate an array then create the json string), then change the string to an object.
var obj = JSON.parse(myString);

Finally you attach the new object, thus dynamically changed the tree presentation.
 simple_chart_config.nodeStructure = obj; 

Example

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/treant-js/1.0/Treant.js"></script>

<style>
/* required LIB STYLES */
/* .Treant se automatski dodaje na svaki chart conatiner */
.Treant { position: relative; overflow: hidden; padding: 0 !important; }
.Treant > .node,
.Treant > .pseudo { position: absolute; display: block; visibility: hidden; }
.Treant.Treant-loaded .node,
.Treant.Treant-loaded .pseudo { visibility: visible; }
.Treant > .pseudo { width: 0; height: 0; border: none; padding: 0; }
.Treant .collapse-switch { width: 3px; height: 3px; display: block; border: 1px solid black; position: absolute; top: 1px; right: 1px; cursor: pointer; }
.Treant .collapsed .collapse-switch { background-color: #868DEE; }
.Treant > .node img { border: none; float: left; }
</style>

<style>

/* optional Container STYLES */
.chart { height: 159px; width: 332px; margin: 5px; margin: 5px auto; border: 3px solid #DDD; border-radius: 3px; }
.node { color: #9CB5ED; border: 2px solid #C8C8C8; border-radius: 3px; }
.node p { font-size: 20px; line-height: 20px; height: 20px; font-weight: bold; padding: 3px; margin: 0; }
</style>

<br />
<div class="chart" id="OrganiseChart-simple">
</div>
<br/>
<p id="demo"></p>
<button onclick="myFunction()">Click me</button>
<p id="changeNode"></p>

<script>
var simple_chart_config = {
 chart: {
  container: "#OrganiseChart-simple"
 },

 nodeStructure: {
  text: { name: "Parent node" },
  children: [
   {
    text: { name: "First child" }
   }
  ]
 }
};
</script>

<script>
  var my_chart = new Treant( simple_chart_config );
  document.getElementById("demo").innerHTML = simple_chart_config.nodeStructure.text.name;
</script>

<script>
function myFunction() {
  document.getElementById("changeNode").innerHTML = "Hello World";
  //simple_chart_config.nodeStructure.text.name = 'changed';

/*
  simple_chart_config.nodeStructure = {
  text: { name: "Parent node" },
  children: [
   {
    text: { name: "First child" }
   },
   {
    text: { name: "Second child" }
   }
  ]
 };
*/ 
 
  var myString = '{"text": { "name": "Parent nodexxx" },"children": [{"text": { "name": "First childxx" }},{"text": { "name": "Second childxx" }}]}';
 
  var obj = JSON.parse(myString);

  simple_chart_config.nodeStructure = obj; 
  my_chart.destroy()
  my_chart = new Treant(simple_chart_config, null, $);
}
</script>

how many posts can you post to blogger per day

Commonly know as 50 posts per day.

The number I know of is 150+ per day. After posting 90ish pages, I start to get no response after pressing Publish button. After posting around 140 empty pages, I start to get the following error when trying to post, which get harder and harder to get around by closing and opening browser.

At the 144th post, I waited tens of minutes, but still get the same error.

After waiting for a few hours, I can finally start to post empty page again, but didn't get far. This post is the 151st post of today.

I am not intentionally trying to abuse blogger, I just need lots of pages with url only differ in number.

I thought if I wait for another day, the posts' url will also differ in date (wrong, the url only have month in it, so I have plenty of time). Now my blog is red flagged, I can not even post more than 2 posts in a short time even in the second day .

trouble shooting post loading slow issue

I noticed posts such as the http://xyzcode.blogspot.com/2017/01/assessment-test-question-1.html performs poorly on some version of mobile browser. Scrolling the page freezes the browser, click buttons sometimes crash them.

I took some effort to look into the issue in this post.

Javascript is Garbage collected language, so if the variables are correctly used, the memory usage should not increase in long term.

4 types of javascript memory leakage

1: Accidental global variables
2: Forgotten timers or callbacks
3: Out of DOM references
4: Closures

Chrome timeline of Memory didn't show any evidence of memory leakage.

Not all mobile browsers are slow on this blogger page. chrome, firefox, opera runs fast and smooth.
The mobile browser such as opera mini freeze when scrolling up/down the post, sometimes crash if I keep pressing the "Time Left" button.

Those lightweight mobile browser also runs poorly on blogger post without javascript, runs poorly on other people's blogger post, sometimes freeze during scrolling, especially difficult on rendering the blogger's header, footer and any portion with rich style.

Conclusion, the post in exam don't have memory leakage, the slowness is related to css rendering and blogger's header and footer in general.

At the client side, the solution is to avoid visiting blogger with lightweight mobile browser or open too many pages simultaneously.

On the server side, the action item is to modify blogger template, use lighter footer, header etc. to support wider spectrum of mobile browsers. The post should also avoid using css features whenever possible (for example, wrap code block inside <pre>code</pre> in HTML instead of copy/paste the code directly into Compose, which generate too much css style ).

my Android phone's browser is freezing and crashing when visiting some pages

The indexing page of OCAJP makes my android browser freeze during scroll. This page has no javascript, (searching the post's HTML for "script" find nothing) , it has many style though.

This page even crashes the mobile browser, I can repeat the crashing.

I don't have global javascript and only have 3 blocks of global css.

What the hell is going on?

As I google around, looks like css is quite memory demanding.

One quick fix is to go to Template ->Mobile
Instead of using Default, use Simple instead.

The loading speed is faster on assessment-test-question-1.html , however the crash issue didn't go away though harder to reproduce, the index page and some other css heavy pages are still freezing sometimes (code blocks have lots of css).

When I use chrome on the same android phone, all the pages loaded fast and beautiful.
Firefox also loads all pages fine, a little bit less smooth than chrome.


Opera mini and Web Browser load decently on other pages, also freeze on This page, and later crashes.
I guess the javascript have memory leakage (need to tap twice in order to show the time left).
==========
http://xyzcode.blogspot.com/2016/02/oca-exam-1z0-808-breaks-down.html

<div style="background-color: white; font-family: arial, helvetica, sans-serif;">
<a href="https://education.oracle.com/pls/web_prod-plq-dad/db_pages.getpage?page_id=5001&amp;get_params=p_exam_id:1Z0-808" target="_blank">OCAJP (Oracle Certified Associate Java Programmer)</a>&nbsp;is prerequisite for&nbsp;<a href="http://xyzcode.blogspot.com/2016/07/ocp-exam-1z0-809-breaks-down.html" target="_blank">OCPJP (Oracle Certified Professional Java Programmer)</a> and beyond. So, in plain english, OCAJP is unavoidable. You can take <a href="https://education.oracle.com/pls/web_prod-plq-dad/db_pages.getpage?page_id=5001&amp;get_params=p_exam_id:1Z0-808" target="_blank">1Z0 - 808</a> exam to obtain OCAJP.<br />
<br />
OCAJP Exam changes year by year. It generally took 150 minutes, there are around 80 multiple choice questions, the pass rate is from 60% to 80%. <a href="http://xyzcode.blogspot.com/2016/02/sample-ocajp-questions.html" target="_blank">OCAJP questions</a> could be tricky, though they are basics.<br />
<br />
When I took the test, there are 77 questions, the pass rate is 65%. The first 10 questions are comparably longer/calculation extensive than the later ones. I used to do 60 questions simulation tests, the real test questions are longer and the time is tighter during the test. It worth over-preparing and you have to digest code (watching for compilation error) fast during real test, which is why the test cost $245.<br />
<br />
This free OCAJP study materials follows the break down list of OCAJP <a href="http://xyzcode.blogspot.com/2016/02/java-setup.html" target="_blank">java 8</a>, also called <a href="https://education.oracle.com/pls/web_prod-plq-dad/db_pages.getpage?page_id=5001&amp;get_params=p_exam_id:1Z0-808" target="_blank">OCA Exam 1Z0 - 808</a>.<br />
<br />
Whenever you need to learn more about a OCAJP and OCPJP keyword, use the Site Search at the upper left corner.<br />
<br />
Good luck with your OCAJP and OCPJP tests.<br />
<br />
<div>
<div style="font-family: Times;">
<h2>
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"><span style="line-height: 20px;">OCAJP</span></span></h2>
<div>
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"><span style="line-height: 20px;"><br /></span></span></div>
<h3>
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"><span style="line-height: 20px;">Simulation Tests</span></span></h3>
</div>
<div style="font-family: Times;">
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"><span style="line-height: 20px;">&nbsp; &nbsp; &nbsp;<a href="http://xyzcode.blogspot.com/2016/07/self-assessment-questions-for-ocajp.html" target="_blank">Self Assessment questions</a></span></span><br />
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"><span style="line-height: 20px;">&nbsp; &nbsp; &nbsp;</span></span><br />
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"><span style="line-height: 20px;">&nbsp; &nbsp; &nbsp;<a href="http://xyzcode.blogspot.com/2016/06/simulation-test-1-80-question-set-answer.html" target="_blank">Simulation Test 1 -- 80 question set</a></span></span><br />
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"><br /></span>
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">&nbsp; &nbsp; &nbsp;<a href="http://xyzcode.blogspot.com/2016/06/simulation-test-2-80-question-set-answer.html">Simulation Test 2 -- 80 question set</a></span><br />
<br />
&nbsp; &nbsp; &nbsp;<a href="http://xyzcode.blogspot.com/2016/06/ocajp-flash-cards.html">OCAJP flash cards</a><br />
<br />
&nbsp; &nbsp; &nbsp;<a href="http://xyzcode.blogspot.com/2016/07/flash-card-list-1.html" target="_blank">Quick Quiz, list 1</a><br />
<br />
&nbsp; &nbsp; &nbsp;<a href="http://xyzcode.blogspot.com/2016/07/flash-card-list-2.html" target="_blank">Quick Quiz, list&nbsp;2</a></div>
</div>
<div style="font-weight: bold;">
<strong><br /></strong></div>
<div style="font-weight: bold;">
<h3>
<strong>Java Basics&nbsp;</strong></h3>
</div>
</div>
<ul style="background-color: white; font-family: arial, helvetica, sans-serif; list-style: none; margin-bottom: 10px; margin-left: 20px; padding: 0px 5px;">
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/02/define-scope-of-variables.html" target="_blank">Define the scope of variables</a>&nbsp;</li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/02/define-structure-of-java-class.html" target="_blank">Define the structure of a Java class</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/02/create-executable-java-applications.html">Create executable Java applications with a main method; run a Java program from the command line; including console output.</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/02/import-other-java-packages-to-make-them.html" target="_blank">Import other Java packages to make them accessible in your code</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/07/compare-and-contrast-features-and.html" target="_blank">Compare and contrast the features and components of Java such as: platform independence, object orientation, encapsulation, etc.</a></li>
</ul>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-weight: bold;">
<h3>
<strong>Working With Java Data Types&nbsp;</strong></h3>
</div>
<ul style="background-color: white; font-family: arial, helvetica, sans-serif; list-style: none; margin-bottom: 10px; margin-left: 20px; padding: 0px 5px;">
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/02/declare-and-initialize-variables.html" target="_blank">Declare and initialize variables (including casting of primitive data types)</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/02/differentiate-between-object-reference.html" target="_blank">Differentiate between object reference variables and primitive variables</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/02/know-how-to-read-or-write-to-object.html" target="_blank">Know how to read or write to object fields</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/02/explain-objects-lifecycle-creation.html" target="_blank">Explain an Object's Lifecycle (creation, "dereference by reassignment" and garbage collection)</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/develop-code-that-uses-wrapper-classes.html" target="_blank">Develop code that uses wrapper classes such as Boolean, Double, and Integer. &nbsp;</a></li>
</ul>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-weight: bold;">
<h3>
<strong>Using Operators and Decision Constructs&nbsp;</strong></h3>
</div>
<ul style="background-color: white; font-family: arial, helvetica, sans-serif; list-style: none; margin-bottom: 10px; margin-left: 20px; padding: 0px 5px;">
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/02/use-java-operators-including.html" target="">Use Java operators; including parentheses to override operator precedence</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/test-equality-between-strings-and-other.html" target="_blank">Test equality between Strings and other objects using == and equals ()</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/create-if-and-ifelse-and-ternary.html" target="_blank">Create if and if/else and ternary constructs</a>&nbsp;</li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/use-switch-statement.html" target="_blank">Use a switch statement&nbsp;</a></li>
</ul>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-weight: bold;">
<h3>
<strong>Creating and Using Arrays&nbsp;</strong></h3>
</div>
<ul style="background-color: white; font-family: arial, helvetica, sans-serif; list-style: none; margin-bottom: 10px; margin-left: 20px; padding: 0px 5px;">
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/declare-instantiate-initialize-and-use.html" target="_blank">Declare, instantiate, initialize and use a one-dimensional array</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/declare-instantiate-initialize-and-use_12.html" target="_blank">Declare, instantiate, initialize and use multi-dimensional array</a></li>
</ul>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-weight: bold;">
<h3>
<strong>Using Loop Constructs&nbsp;</strong></h3>
</div>
<ul style="background-color: white; font-family: arial, helvetica, sans-serif; list-style: none; margin-bottom: 10px; margin-left: 20px; padding: 0px 5px;">
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/create-and-use-while-loops.html" target="_blank">Create and use while loops</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/create-and-use-for-loops-including.html" target="_blank">Create and use for loops including the enhanced for loop</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/create-and-use-dowhile-loops.html" target="_blank">Create and use do/while loops</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/07/compare-loop-constructs.html" target="_blank">Compare loop constructs</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/use-break-and-continue.html" target="_blank">Use break and continue</a> &nbsp;</li>
</ul>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-weight: bold;">
<h3>
<strong>Working with Methods and Encapsulation&nbsp;</strong></h3>
</div>
<ul style="background-color: white; font-family: arial, helvetica, sans-serif; list-style: none; margin-bottom: 10px; margin-left: 20px; padding: 0px 5px;">
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/create-methods-with-arguments-and.html" target="_blank">Create methods with arguments and return values; including overloaded methods</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/apply-static-keyword-to-methods-and.html" target="_blank">Apply the static keyword &nbsp;to methods and fields</a> &nbsp;</li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/create-and-overload-constructors.html" target="_blank">Create and overload constructors; including impact on default constructors</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/apply-access-modifiers.html" target="_blank">Apply access modifiers</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/apply-encapsulation-principles-to-class.html" target="_blank">Apply encapsulation principles to a class</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/determine-effect-upon-object-references.html" target="_blank">Determine the effect upon object references and primitive values when they are passed &nbsp;into methods that change the values</a></li>
</ul>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-weight: bold;">
<h3>
<a href="https://www.blogger.com/null" name="working-with-inheritance"></a>
<strong>Working with Inheritance&nbsp;</strong></h3>
</div>
<ul style="background-color: white; font-family: arial, helvetica, sans-serif; list-style: none; margin-bottom: 10px; margin-left: 20px; padding: 0px 5px;">
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/04/describe-inheritance-and-its-benefits.html" target="_blank">Describe inheritance and its benefits</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/04/develop-code-that-demonstrates-use-of.html" target="_blank">Develop code that demonstrates the use of polymorphism; including overriding and object type versus reference type</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/04/determine-when-casting-is-necessary.html" target="_blank">Determine when casting is necessary</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/04/use-super-and-this-to-access-objects.html" target="_blank">Use super and this to access objects and constructors</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/04/use-abstract-classes-and-interfaces.html" target="_blank">Use abstract classes and interfaces</a></li>
</ul>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-weight: bold;">
<h3>
<strong>Handling Exceptions&nbsp;</strong></h3>
</div>
<ul style="background-color: white; font-family: arial, helvetica, sans-serif; list-style: none; margin-bottom: 10px; margin-left: 20px; padding: 0px 5px;">
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/04/differentiate-among-checked-exceptions.html" target="_blank">Differentiate among checked exceptions, unchecked exceptions, and Errors</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/04/create-try-catch-block-and-determine.html" target="_blank">Create a try-catch block and determine how exceptions alter normal program flow</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/07/describe-advantages-of-exception.html" target="_blank">Describe the advantages of Exception handling</a>&nbsp;</li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/04/create-and-invoke-method-that-throws.html">Create and invoke a method that throws an exception</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/04/recognize-common-exception-classes-such.html" target="_blank">"Recognize common exception classes (such as NullPointerException, ArithmeticExcpetion, ArrayIndexOutOfBoundsException, ClassCastException)"</a></li>
</ul>
<div style="background-color: white; font-family: arial, helvetica, sans-serif; font-weight: bold;">
<h3>
<strong>Working with Selected classes from the Java API&nbsp;</strong></h3>
</div>
<ul style="background-color: white; font-family: arial, helvetica, sans-serif; list-style: none; margin-bottom: 10px; margin-left: 20px; padding: 0px 5px;">
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/manipulate-data-using-stringbuilder.html" target="_blank">Manipulate data using the StringBuilder class and its methods</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/creating-and-manipulating-strings.html" target="_blank">Creating and manipulating Strings</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/create-and-manipulate-calendar-data.html" target="_blank">Create and manipulate calendar data using classes from java.time.LocalDateTime, &nbsp;java.time.LocalDate, java.time.LocalTime, java.time.format.DateTimeFormatter, java.time.Period&nbsp;</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/declare-and-use-arraylist-of-given-type.html" target="_blank">Declare and use an ArrayList of a given type&nbsp;</a></li>
<li style="line-height: 20px; list-style-position: outside; margin-top: 2px;"><a href="http://xyzcode.blogspot.com/2016/03/write-simple-lambda-expression-that.html" target="_blank">Write a simple Lambda expression that consumes a Lambda Predicate expression</a></li>
</ul>
<div>
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"><span style="line-height: 20px;"><br /></span></span></div>
<div>
<span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;"><span style="line-height: 20px;"><a href="http://xyzcode.blogspot.com/2016/07/ocp-exam-1z0-809-breaks-down.html" target="_blank">Continue to OCPJP&gt;</a></span></span></div>
<div>
<h3>
</h3>
</div>

=====================
http://xyzcode.blogspot.com/2017/01/assessment-test-question-1.html

<script>

function setCookie(cname,cvalue,exdays) {
    cname = cname;
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function spentTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    var h0=getCookie('xyz-atqtimeh');
    var m0=getCookie('xyz-atqtimem');
    var s0=getCookie('xyz-atqtimes');

    var tm=getCookie('xyz-atqtimetm');
    if (h0 != "" && m0 != "" && s0 != "" && tm != "") {
       var time = (h - h0)*3600 + (m - m0)*60 + (s - s0);
       var minutes = Math.floor(time / 60);
       var seconds = time - minutes * 60;

       var ml = (tm - 1 - minutes);
       var sl = (60 - seconds);
       if (ml < 0) {
          document.getElementById('txt').innerHTML = "No time left";
       } else {
          document.getElementById('txt').innerHTML = ml + " minutes and " + sl + " seconds left";
       }
         
    } else {
       document.getElementById('txt').innerHTML = "You should start the test properly and answer all questions in one session.";
    }
}

function getCookie(cname) {
    cname = cname;
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function showChoices(cname) {
    var answer=getCookie(cname);
    if (answer != "") {
       document.getElementById('chosen').innerHTML = "You have chosen: " + answer;
    } else {
       document.getElementById('chosen').innerHTML = "You didn't submit an answer.";
    }
}

function getChoices(cname) {
    var value = "";
    if (document.getElementById('A').checked) {
       value = value + "A,";
    }
    if(document.getElementById('B').checked) {
       value = value + "B,";
    }
    if(document.getElementById('C').checked) {
       value = value + "C,";
    }
    if(document.getElementById('D').checked) {
       value = value + "D,";
    }
    if(document.getElementById('E').checked) {
       value = value + "E,";
    }
    if(document.getElementById('F').checked) {
       value = value + "F,";
    }
    if(document.getElementById('G').checked) {
       value = value + "G,";
    }
    if(document.getElementById('H').checked) {
       value = value + "H,";
    }
    setCookie(cname, value, 30);
}
</script>

<a href="http://xyzcode.blogspot.com/2017/01/ocpjp-assessment-test.html">Question List</a><br />
<br />
<button onclick="spentTime()">Time Left</button>
<br />
<div id="txt">
</div>
<br />
Question:<br />
<br />
What is the result of executing the following application? (Choose all that apply.)<br />
<br />
<div class="code">
<div class="p1">
<div class="p2">
<span class="s2">&nbsp; 1 </span><span class="s1">import java.util.concurrent.*;</span></div>
<div class="p2">
<span class="s2">&nbsp; 2 </span><span class="s1">import java.util.stream.*;</span></div>
<div class="p2">
<span class="s2">&nbsp; 3 </span><span class="s1">public class test{</span></div>
<div class="p2">
<span class="s2">&nbsp; 4 </span><span class="s1">&nbsp; &nbsp; public static void await(CyclicBarrier cb) {</span></div>
<div class="p2">
<span class="s2">&nbsp; 5 </span><span class="s1">&nbsp; &nbsp; &nbsp; &nbsp; try {</span></div>
<div class="p2">
<span class="s2">&nbsp; 6 </span><span class="s1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cb.await();</span></div>
<div class="p2">
<span class="s2">&nbsp; 7 </span><span class="s1">&nbsp; &nbsp; &nbsp; &nbsp; } catch (InterruptedException | BrokenBarrierException e) {</span></div>
<div class="p2">
<span class="s2">&nbsp; 8 </span><span class="s1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //</span></div>
<div class="p2">
<span class="s2">&nbsp; 9 </span><span class="s1">&nbsp; &nbsp; &nbsp; &nbsp; }</span></div>
<div class="p2">
<span class="s2">&nbsp;10 </span><span class="s1">&nbsp; &nbsp; }</span></div>
<div class="p2">
<span class="s2">&nbsp;11 </span><span class="s1">&nbsp; &nbsp; public static void main(String...args) {</span></div>
<div class="p2">
<span class="s2">&nbsp;12 </span><span class="s1">&nbsp; &nbsp; &nbsp; &nbsp; final CyclicBarrier cb = new CyclicBarrier(3, ()-&gt; System.out.printl</span><span class="s1">n("Pass!")); &nbsp;</span></div>
<div class="p2">
<span class="s2">&nbsp;13 </span><span class="s1">&nbsp; &nbsp; &nbsp; &nbsp; ExecutorService service = Executors.newScheduledThreadPool(3);</span></div>
<div class="p2">
<span class="s2">&nbsp;14 </span><span class="s1">&nbsp; &nbsp; &nbsp; &nbsp; IntStream.iterate(1, i-&gt;1)&nbsp;</span></div>
<div class="p2">
<span class="s2">&nbsp;15 </span><span class="s1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .limit(7)</span></div>
<div class="p2">
<span class="s2">&nbsp;16 </span><span class="s1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .forEach(i-&gt;service.submit(</span></div>
<div class="p2">
<span class="s2">&nbsp;17&nbsp;</span><span class="s1"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ()-&gt;await(cb))); &nbsp;</span></div>
<div class="p2">
<span class="s2">&nbsp;18 </span><span class="s1">&nbsp; &nbsp; &nbsp; &nbsp; service.shutdown();</span></div>
<div class="p2">
<span class="s2">&nbsp;19 </span><span class="s1">&nbsp; &nbsp; }&nbsp; &nbsp;</span></div>
<div class="p2">
<span class="s2">&nbsp;20 </span><span class="s1">} &nbsp;&nbsp;</span></div>
</div>
</div>
<br />
<div class="p2">
<br /></div>
<br />
Choice:<br />
<input id="A" type="checkbox" value="A" />A. It outputs Pass! once.<br />
<input id="B" type="checkbox" value="B" />B. It outputs Pass! twice.<br />
<input id="C" type="checkbox" value="C" />C. It outputs Pass! three times.<br />
<input id="D" type="checkbox" value="D" />D. The code will not compile because of line 7.<br />
<input id="E" type="checkbox" value="E" />E. The code will not compile because of line 13.<br />
<input id="F" type="checkbox" value="F" />F. The code will not compile because of line 15.<br />
<input id="G" type="checkbox" value="G" />G.&nbsp;<span class="s3">The code compiles but throws an exception at runtime.</span><span style="color: black; font-variant-ligatures: no-common-ligatures;">&nbsp;</span><br />
<input id="H" type="checkbox" value="H" />H. It compiles but waits forever at runtime.<br />
<br />
<button onclick="getChoices('xyz-atq1')">Submit</button>
<br />
<br />
<a href="http://xyzcode.blogspot.com/2017/01/assessment-test-question-2.html">Next Question</a><br />
<br />
<br />
<button onclick="document.getElementById('answernode').style.display='block'">Answer</button>
<button onclick="showChoices('xyz-atq1')">You answered</button>
<br />
<div id="chosen">
</div>
<br />
<br />
<div id="answernode" style="display: none;">
Answer: B, H<br />
<br />
Explain:&nbsp;<span class="s1">new CyclicBarrier(3, ()-&gt; System.out.printl</span><span class="s1">n("Pass!")); &nbsp;created aCyclicBarrier with limit of 3 and barrier action as printing "Pass!".</span><br />
<br />
IntStream.iterate(1, i-&gt;1) generates a stream of 1, .limit(7) gets the first 7 elements from the stream, .forEach()&nbsp;submits a new thread to ExecutorService for each one of the stream elements, for each thread, ()-&gt;await(cb) represents the task submitted, which calls CyclicBarrier's await() method. <br />
<br />
CyclicBarrier has a limit 3, the executor's thread pool has size 3, the total thread number submitted to ExecutorService is 7. The first 3 threads in thread pool calls await() 3 times, thus breaks the CyclicBarrier, gets "Pass!" printed once; the next 3 threads in thread pool calls await() 3 times, thus breaks the CyclicBarrier, gets "Pass!" printed twice; the 7th thread is submitted into the thread pool and calls await(), since the second and third await() has never been called, the barrier is never broken and the program hangs.<br />
<br />
service.shutdown(); does not actually stop any tasks that have already been submitted to the thread executor. Since your thread submitting is done through the stream forEach, even though the main thread exits firstly, all the 7 Callables are still submitted to the ExecutorService (3 in thread pool, the other 4 in ScheduledThreadPoolExecutor's workQueue).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/WCynEMqo8OY/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/WCynEMqo8OY?feature=player_embedded" width="320"></iframe></div>
<br />
<br />
Study:</div>
<br />
<br />