View source for Help:Wiki University VisualEditor--Cite References

<div style="display:grid; grid-template-columns:1fr 1fr 2fr 2fr 2fr 2fr">
<!--------------row 1-------------------------->
<!--tool bar--------------------------------------------------->
{{VisualEditor School}}
<!----------------row 2---------------------------->
<!-------------------menu-------------------------------->
<div style="grid-column:1/3; background-color:#FFEDCC; box-shadow:1px 1px 5px #888888">{{VisualEditor Tutorial Sidebar}}</div>
<!-----------------------main------------------------>
<!-------------------------------chapters top row---------------------------------->
<div style="grid-column:3/8; padding-left:0.5em">
<!-------------------------------chapters top row---------------------------------->
<div style="display:flex; justify-content:space-between; padding:10px; margin-bottom:-1em">
<div style="font-size:1.3em">[[Help:Wiki University VisualEditor--Links|<< Previous Chapter]]</div>
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University VisualEditor--Lists|Next Chapter >>]]</span></div>
</div>
<div style="margin-left:0.5em">
<!-----------------------MAIN MATERIAL BELOW THIS LINE-------------------------------------------->
==Visual Editor toolbar==
<div style="display:flex">
<!---------------------------UNDO ARROW-------------------------------------------------------------->
<div style="flex:0.75; border-left:1px solid lightblue; border-bottom:1px solid lightgray; border-top:1px solid lightblue;">[[File:UndoVE.jpg|40px]]</div>
<!---------------------------------REDO ARROW------------------------------------------------------------->
<div style="flex:0.75; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue;">[[File:RedoVE.jpg|40px]]</div>
<!---------------------------------------PARAGRAPH --------------------------------------------------------->
<div style="flex:3; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">Paragraph <div style="margin-left:3vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div></div>
<!--------------------------------------TEXT STYLE--------------------------------------------------->
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"><div style="font-size:1.3vw; font-style:italic; text-decoration: underline">'''A'''</div><div style="margin-left:1vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div></div>
<!------------------------------------LINKS------------------------------------------------------------>
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">
<div style="display:flex; transform:rotate(135deg)"><div style="width:10px; height:5px; border:3px solid black; border-radius:8px"></div>
<div style="width:10px; height:5px; border:3px solid black; border-radius:8px; margin-left:-8px"></div>
</div>
</div>
<!---------------------------------------------CITE----------------------------------------------------------->
<div style="flex:1.5; display:flex; align-items:center; justify-content:center; border:1px solid red">Cite<div style="margin-left:1vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div></div>
<!------------------------------LISTS---------------------------------------------------------------------->
<div style="flex:1.2; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">

<div style="display:flex; flex-direction:column">
<div style="display:flex"><div style="width: 5px; height: 5px; background: black; border-radius: 2.5px; margin-right:3px; margin-bottom:3px"></div><div style="display:flex; align-items:center; width:15px; height:5px"><div style="width:15px; height:3px; background-color:black"></div></div></div>
<div style="display:flex"><div style="width: 5px; height: 5px; background: black; border-radius: 2.5px; margin-right:3px; margin-bottom:3px"></div><div style="display:flex; align-items:center; width:15px; height:5px"><div style="width:15px; height:3px; background-color:black"></div></div></div>
<div style="display:flex"><div style="width: 5px; height: 5px; background: black; border-radius: 2.5px; margin-right:3px; margin-bottom:3px"></div><div style="display:flex; align-items:center; width:15px; height:5px"><div style="width:15px; height:3px; background-color:black"></div></div></div>
</div>
<div style="margin-left:1vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div>

</div>
<!----------------------------------------------INSERT------------------------------------------------------->
<div style="flex:1.5; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">Insert<div style="margin-left:1vw; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div></div>
<!---------------------------------------------------------OMEGA----------------------------------------------------->
<div style="flex:0.8; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"><span style="font-size:1.5vw">Ω</span></div>
<!-------------------------------------------------------------------HELP----------------------------------------------------->
<div style="flex:4; display:flex; align-items:center; justify-content:flex-end; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">
<div style="display:flex; align-items:center; justify-content:center; border:3px solid black; width:20px; height:20px; border-radius:20px; font-size:1.5em; margin-right:10px">'''?'''</div>
</div>
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue">
<div style="display:flex; flex-direction:column">
<div style="width:15px; height:3px; margin-bottom:3px; background-color:black"></div>
<div style="width:15px; height:3px; margin-bottom:3px; background-color:black"></div>
<div style="width:15px; height:3px; background-color:black"></div>
</div>
</div>
<!-------------------------------------------------------------TO GO WIKITEXT--------------------------------------------->
<div style="flex:1; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue"><span style="font-size:1.3vw; font-weight:bold">[[ ]]</span></div>
<!--------------------------------------------------------SAVE--------------------------------------------------------->
<div style="flex:2; display:flex; align-items:center; justify-content:center; border-right:1px solid lightgray; border-bottom:1px solid lightgray; border-top:1px solid lightblue; color:white; background-color:lightgray">Save page</div>
</div>

<!--visualeditor toolbar------------------------------------------------------------------------------------->

==Citing References==

<!--detailed explanation of items on VisualEditor toolbar------------------------------------------->

<table style="width:100%; border:1px solid lightgrey">


<!--Cite--------------------------------------------------------------------------------->

<tr>
<td style="border:1px solid red">
<div style="display:flex; padding:10px">
Cite<div style="margin-left:1vw; align-self:center; width:0; height:0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid gray"></div></td>
<td style="border:1px solid lightgrey; padding:10px">References or footnotes</td>
<td style="border:1px solid lightgrey; padding:10px">[[File:Visualeditor9.PNG|300px|right]][[File:Visualeditor10.PNG|300px|right]][[File:Visualeditor11.PNG|300px|right]]
Allows you to place references or footnotes anywhere in the article.  Highlight the text to which you are making reference, then click on '''Cite'''.  The first panel appears and you have two choices: Basic or Re-use.<br>

'''Basic''' 
*Clicking Basic brings up the second panel.  
**In the citation box, note your blinking cursor.  Enter your reference or footnote, then press the '''Insert''' button. The tool bar above the citation box allows you to change your entry into a link or change the text style.<br>

'''Re-use'''
*Clicking Re-use will bring up a third panel.
**This panel displays previous references you have created on the page and allows you to select an existing reference without having to retype it.
</td>
</tr>





</table>
{{reflist}}

==Try these out==
[[File:Tests.gif|100px|right]]
<div style="border-top:10px solid lightgray; border-left:10px solid lightgray; border-right:10px solid lightgray; border-radius:5px;"><div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgray;">Quick Quiz</div> <div style="padding-top:12px; padding-left:10px;">
*You have to retype a reference or footnote even if it is use elsewhere in the article?
::A. True
::B. False

*After you have typed in the reference, you can only change it to a link after you have saved it?
::A. True
::B. False

*There is no way to select an existing reference to reuse in another part of the article?
::A. True
::B. False
</div> <div style="background-color:lightgray; width:100%; height:35px; padding-top:10px;"><div style="width:160px; height:20px; padding-top:3px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:5px;">[[FamilySearch VisualEditor Tutorial Answers#Cite References|Check your answers ]] </div> </div> </div> 


<!--Exercises -------------------------------------------------------------->
<div style="border-top:10px solid lightgreen; border-left:10px solid lightgreen; border-right:10px solid lightgreen; border-radius:5px ">
<div style="font-size:14pt; width:100%; height:30px; vertical-align:middle; background-color:lightgreen; ">Exercises</div>
<div style="padding-top:12px; padding-left:10px; ">
*Create a reference or footnote for the word "Lorem" explaining what the Lorem ipsum paragraph is used for.
*On the word "Phasellus" put the same reference you created again.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis risus libero, ac vehicula neque rhoncus luctus. Phasellus mattis nisl ut felis porttitor, vel faucibus nisl viverra. Suspendisse convallis erat justo, pulvinar sollicitudin ante eleifend sed. Mauris tortor tellus, mattis non egestas nec, molestie consectetur nibh. Praesent sagittis enim sit amet leo fringilla, in euismod magna ullamcorper. Phasellus eget elit viverra, convallis metus id, ornare neque. Duis nec nunc sed est iaculis consequat.
</div>
<div style="background-color:lightgreen; width:100%; height:35px; padding-top:10px; ">

</div>
</div>
<!---------------------------------END OF MATERIAL------------------------------------------->
</div>
<!-------------------------------chapters bottom---------------------------------------------------->
<div style="clear:both"></div>
<div style="display:flex; justify-content:space-between; padding:10px">
<div style="font-size:1.3em">[[Help:Wiki University VisualEditor--Links|<< Previous Chapter]]</div>
<div style="text-align:right"><span style="background-color:orange; padding:5px; font-size:1.3em">[[Help:Wiki University VisualEditor--Lists|Next Chapter >>]]</span></div>
</div>
{{reflist}}
</div>
__NOTOC__
[[Category:Wiki Lessons]]