I want to create an interactive Quiz. The questions are displayed on the big screen, and on mobile devices with answers.
Template.quizmain.helpers
<h2>{{Question.question}}</h2>
<ul class="list-group">
<li class="list-group-item">{{Question.answers.A}}</li>
<li class="list-group-item">{{Question.answers.B}}</li>
<li class="list-group-item">{{Question.answers.C}}</li>
<li class="list-group-item">{{Question.answers.D}}</li>
</ul>
quizmain.js
Question: function() {
return Questions.findOne({nr:
4
});
I can manally set currnetly displayed question from quizmain.js by changing the number. How can I bind this to currentQuestion item in another collection, that I'll change from admin panel?
I think you have to make some flag property into your collection like "isCurrent".
{
nr: 4
question : 'you question',
answer: { A: 'a', B: 'b', C:'c', D:'d'},
isCurrent: true
}
and change your helper function
return Questions.findOne({isCurrent: true});
Now you just update "isCurrent" flag to false and new one to true from admin page.
I hope this will help you.
Related
I have the following Xpath to locate an element which has the text Manager. I need to use CSS in our Cypress IO automation. My test adds a new item in the Gui by clicking the Add button and types in Manager and clicks the Save button. I want to do an Assertion the text Manager exists when it has been saved. the Assertion is not working due to not finding the correct locator.
Xpath locator:
//span[contains(text(),'Manager')]
I tried to use the following as CSS
cy.get('span:contains("Operator")
The locator is not working I get the following error when i run my code
o
find.form-control3
o 14assertexpected [ <span.form-control>, 2 more... ] to have text Manager, but the text was ManagerUndefinedManager3
AssertionError
Timed out retrying after 10000ms: expected '[ <span.form-control>, 2 more... ]' to have text 'Manager', but the text was 'UndefinedManager'
The first item by default in the list of elements is called Undefined. When a new entry is added it is Manager in the list.
My code snippet is:
static get AudienceTextfieldSavedValue(): Cypress.Chainable<JQuery<HTMLElement>> {
//return cy.get('span:contains("Manager")').should('have.text', 'Manager');
//return cy.get('(ul).find(li with given text)..find(form-control).have "Manager")')
return cy.get('.cdk-drop-list').find('.form-control').should('have.text', 'Manager');
}
it('Add Audience', () => {
Lists.navigateToLists;
Audience.clickAdd;
Audience.AudienceTextfield.type("Manager");
Audience.getSaveButton.click().then(() => {
cy.wait(['#savingAudienceRecord']);
});
Audience.AudienceTextfieldSavedValue.should('have.text', 'Manager');
});
The HTML snippet is:
What is the correct css locator I should use please? Thanks
Riaz
In my understanding, the simplest reproduction of what happens during the test is
DOM starts with two spans
<ul class="cdk-drop-list">
<li><span class="form-control">Manager</span></li>
<li><span class="form-control">Undefined</span></li>
</ul>
You add the new entry and the DOM becomes
<ul class="cdk-drop-list">
<li><span class="form-control">Manager</span></li>
<li><span class="form-control">Undefined</span></li>
<li><span class="form-control">Manager</span></li>
</ul>
You want to check the last entry, so AudienceTextfieldSavedValue() should only select the last span in the list (assuming the save action does not sort the list).
static get AudienceTextfieldSavedValue(): Cypress.Chainable<JQuery<HTMLElement>> {
return cy.get('.cdk-drop-list').find('.form-control')
.last() // assuming the saved field is the last one
.should('have.text', 'Manager');
}
it('Add Audience', () => {
Lists.navigateToLists;
Audience.clickAdd;
Audience.AudienceTextfield.type("Manager");
Audience.getSaveButton.click().then(() => {
cy.wait(['#savingAudienceRecord']);
});
Audience.AudienceTextfieldSavedValue.should('have.text', 'Manager');
});
.should('have.text', 'Manager') is performed twice, so you can perhaps remove it from AudienceTextfieldSavedValue() and just return the last entry.
That way, you can test with different text entry.
You may also want check the number of entries increases from 2 to 3, because if Audience.getSaveButton.click() fails to do the save your test would still pass.
static get AudienceTextfieldSavedValue(): Cypress.Chainable<JQuery<HTMLElement>> {
return cy.get('.cdk-drop-list').find('.form-control')
.last() // assuming the saved field is the last one
}
static get AudienceTextfieldCount(): Cypress.Chainable<JQuery<HTMLElement>> {
return cy.get('.cdk-drop-list').find('.form-control')
.its('length')
}
it('Add Audience', () => {
Lists.navigateToLists;
Audience.AudienceTextfieldCount().should('eq', 2)
Audience.clickAdd;
Audience.AudienceTextfield.type("Manager");
Audience.getSaveButton.click().then(() => {
cy.wait(['#savingAudienceRecord']);
});
Audience.AudienceTextfieldCount().should('eq', 3)
Audience.AudienceTextfieldSavedValue.should('have.text', 'Manager');
});
Maybe not the best title, but I didn't know how to name it.
Navigation contains:
Who are we?
What we do?
Our team
Services
Contact
<ul class="list-unstyled h-100">
<li>
Ko smo mi?
</li>
<li>
Čime se bavimo?
</li>
<li>
Naš tim
</li>
<li>
Usluge
</li>
<li>
Kontakt
</li>
Numbers 1, 2 and 3 belong to view About, and as you can see, Services and Contact are Separated views.
I have jQuery code that controls smooth scroll between anchors
$('a[href^="#"]').on('click', function (event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 600, function () {
window.location.hash = hash;
});
}
});
And everything works just fine until user goes to Services or Contact view. After that, he can't come back to any of this anchors, which is normal, because links not pointing to controller. If I put /page/about/ in front of every anchor, then I don't have smooth scroll in about page, it loads every time from beginning.
Question is, is there any solution to solve this, to have anchors in nav and landing page, and other views?
Here is the link to the website, so if you don't understand me, you can try by yourself. Btw, don't click on contact, there is no view for that yet, and services is empty view, so don't be confused with style.
https://test.cherrydevelop.com
P.S. If anyone have better name for topic, you are welcome!
<li>#Html.ActionLink("Contact Us", "Contact", "Home")</li>
<li>Services
<ul>
<li>#Html.ActionLink("IT", "IT", "Home")
<ul>//Dropdown
<li>#Html.ActionLink("Data Backup", "DataBackup", "Home")</li>
</ul>
</li>
For example this is my menu my css class is "selected" for active link.. I want to use it at the easiest way. Can any one help me for MVC4.. I have looked some solutions but don't have much knowledge to use it..
<ul class="#{booleanForThisIsSelected ? "selected" : "";}">//Dropdown
I use the following technique all the time, using jQuery
<script type="text/javascript">
var currentLocation = window.location;
$(function () {
$('.menu li a').each(function () {
if (this.href == currentLocation) {
$(this).parent().addClass("current");
}
});
});
</script>
This block at first gets the current page url, then it gets all the menu anchors and compares each one with the current page url, once it finds a match, it gives the matching anchor a special class current which should indicate the current page link.
Please note that the selector $('.menu li a') should be changes to match your own structure so it can get the menu items correctly.
Hope this helps, let me know if you need anything else.
I would recommend you to use MvcSiteMapProvider MVC4.
You install the nuget package.
Then you add links according to your site structure to the Mvc.Sitemap-file.
Now you should be able to use the MenuHelperModel.cshtml-file to define the rendering behaviour of all links in your sitemap (including currently selected ones), an example of this could look like this:
#model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
#using System.Web.Mvc.Html
#using MvcSiteMapProvider.Web.Html.Models
<ul id="menu">
#foreach (var node in Model.Nodes) {
string classes = node.IsCurrentNode | node.IsInCurrentPath | node.Children.Any(n => n.IsCurrentNode)
? "selected" : "";
<li class="#classes">#Html.DisplayFor(m => node)
#if (node.Children.Any()) {
#Html.DisplayFor(m => node.Children)
}
</li>
}
</ul>
All you have to do now is ensure your links show up on your page, best location to put it should be your Layout-/Master-Page.
There you could for example add a call to
#Html.MvcSiteMap("MvcSiteMapProvider").Menu(0, true, false, 1)
Which renders only the first level of your sitemap.
If you want a more verbose example using this you can take a look at my question here.
But keep in mind that uses the now obsolete MvcSiteMapProvider-Package, so there is a slight syntax change inside MenuHelperModel.cshtml.
Folks I am having an issue with rename and JsTree. I have created a JS Fiddle to highlight the issue. http://jsfiddle.net/KJYrs/. My scenario is that I'd like to validate that the entered name is not a default name or contains special characters. When I try to fire the rename event after the initial failed attempt the inline editor appears above the root node.
<script type="text/javascript" class="source">
$(function () {
$("#demo1").jstree({
"plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"]
}).bind("rename.jstree", function (event, data) {
//let's assume I do some vaidation here and it fails
//so I want to rename until valid
if (event.type === 'rename') {
$("#demo1").jstree("deselect_all");
$("#demo1").jstree("select_node", "#" + data.rslt.obj[0].id);
$("#demo1").jstree("rename");
}
});
});
</script>
<div id="demo1" class="demo">
<ul>
<li id="phtml_1"> Root node 1
<ul>
<li id="phtml_2"> Child node 1
</li>
<li id="phtml_3"> Child node 2
</li>
</ul>
</li>
<li id="phtml_4"> Root node 2
</li>
</ul>
</div>
Any help or suggestions would be greatly appreciated.
The issue appears because you call the rename, inside the rename - is not crash, but creates other problems. A simple solution is to call after the rename ends, using the setTimeout as:
$(function () {
$("#demo1").jstree({
"plugins": ["themes", "html_data", "ui", "crrm", "contextmenu"]
}).bind("rename.jstree", function (event, data) {
//let's assume I do some vaidation here and it fails
//so I want to rename until valid
if (event.type === 'rename')
{
setTimeout(function(){
$("#demo1").jstree("deselect_all");
$("#demo1").jstree("select_node", "#" + data.rslt.obj[0].id);
$("#demo1").jstree("rename");
},100);
}
});
});
And the results:
http://jsfiddle.net/KJYrs/1/
Now you have other problems that you need to solve, a cancel of the rename, and to disable the menu until this ends.
Currently I have a Wordpress website that uses Isotope to display all posts in a grid and there is a fixed navigation that is used for filtering the post categories.
I am trying to add some Javascript or Jquery to scroll to the top of the page when a navigation item is clicked - so it filters the category and also scrolls to the top of the page.
I have been trying different examples for a while and cannot figure it out.
I was hoping someone might be able to point me in the right direction.
Currently my navigation looks like this:
<div class="menuContainer right">
<ul id="options" class="option-set">
<li>Editorial</li>
<li> </li>
<li>Covers</li>
<li> </li>
<li>Advertising</li>
<li> </li>
<li>Film</li>
</ul>
</div>`
and the current js.
<script type="text/javascript">
jQuery(document).ready(function(){
var mycontainer = jQuery('#isocontent');
mycontainer.isotope({
itemSelector: '.postContainer',
});
// filter items when filter link is clicked
jQuery('#options a').click(function(){
var selector = jQuery(this).attr('data-filter');
mycontainer.isotope({ filter: selector });
return false;
});
// set selected menu items
var $optionSets = $('.option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
});
</script>
All help would be greatly appreciated.
Thank you!
Ok, seeing is believing :) easier to understand what you want. Basically, all you have to do is to hook up what I commented before on your Editorial, Covers, Advertising, Film links. Since you use Isotope with filtering, you have assigned click functions to your links already...
// stuff
<ul id="filters">
<li>Show all, home, whatever</li>
<li>Editorial</li>
<li>Covers</li>
<li>Advertising</li>
<li>Film</li>
</ul>
// more stuff
$('#filters a').click(function() {
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
$('body,html').animate({ // always scrolls to the top when filter link is clicked
scrollTop: 0
}, 800);
return false;
});
// even more stuff