---
layout: default
title: translate
---

<!--START OUTER DIV TO WRAP PAGE TEXT CONTENT AND SET IT NOT TO TRANSLATE -->
<div class="notranslate">  
<h1>Translation Example</h1>
<p>This page contains a customised version of Google Translate, for students to translate items they wish to. It's a bit experimental, so try it out.</p>
<p>Note: The basic code for Google Translate will translate the entire page. So we have to set up some form fields and block the translation from applying to the whole page.</p>
<p>Enter your phrase and choose a language:</p>

<!-- SET UP TRANSLATION FIELDS IN TWO COLUMNS: TEXTAREA (transInput) IN LEFT COL; OUTPUT (transOutput) IN paragraph in RIGHT COL -->
<div class="row">
  <div class="col-sm-6 p-3 bg-light text-white">
    <div id="google_translate_element"></div>
    <textarea rows="3" id="transInput" style="width:100%;"></textarea>
  </div>
  <div class="col-sm-6 p-3 bg-light text-black translate">
    <h4 class="notranslate">Translation:</h4>
    <p id="transOutput" style="font-size:120%;"></p>
  </div>
</div>
<!-- END TRANSLATION FIELDS AREA -->

<hr>
<p><a href="https://raw.githubusercontent.com/martinbarge/sml5202-2022-JaneSmith/main/page3.html">Get the code for this page here.</a></p>  
<hr>
</div>
<!--END OUTER DIV-->

<!-- SCRIPTS -->
<!-- SCRIPT 1: FUNCTIONS TO GET TEXT FROM INPUT TEXT AND DISPLAY AS OUTPUT TEXT TRANSLATED. THEN CALL TO GOOGLE TRANSLATE BUTTON HANDLER -->
<script> 
 
(function () {
    window.onpageshow = function(event) {
        if (event.persisted) {
            window.location.reload();
        }
    };
})();
  
function googleTranslateElementInit() {
  new google.translate.TranslateElement({ includedLanguages: 'fr,de,pt,es', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element');
}

document.addEventListener("DOMContentLoaded", (event) => {
 
  document.getElementsByTagName("title")[0].setAttribute("class", "notranslate");
  
  var navbar = document.querySelector(".navbar");
  navbar.classList.add("notranslate");
  var banner = document.querySelector(".myBanner");
  banner.classList.add("notranslate");
  
  var x = document.getElementById("google_translate_element");
  x.addEventListener("click", myTrans);
});

function myTrans() {
  let myPhrase = document.getElementById("transInput").value;
  document.getElementById('transOutput').innerHTML = myPhrase;
  //document.getElementsByTagName("title")[0].setAttribute("class", "notranslate");
}
  
  window.onpopstate = function(event) {
  // Reinitialize your translation widget here
  googleTranslateElementInit();  
};
</script>

<!-- SCRIPT 2: LINK TO GOOGLE TRANSLATION FUNCTION SCRIPT  -->
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- END OF SCRIPTS -->